本节重点

  • vue中select的基本使用
  • vue中select的默认选择
  • vue中select的change事件

select的基本使用

首先看下面一个实例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue中Select选择框及change事件,默认选择</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>

<body>
<H1>Select选择框极其值获取,默认选择</H1>

<div id="app">
    <label for="languages">编程语言:</label>
    <select id="languages" v-model="languageSelected">
        <option :value="language.code" v-for="language in languages">{{language.desc}}</option>
    </select>
</div>

<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            languages: [
                {
                    code: 'Java',
                    desc: 'Java语言'
                },
                {
                    code: 'Python',
                    desc: 'Python语言'
                },
                {
                    code: 'PHP',
                    desc: 'PHP语言'
                }
            ],
            languageSelected: null
        }
    })
</script>
</body>

</html>

以上实现了基本的select数据读取,select选择内容的呈现,已经结果的绑定。首先,通过v-for属性遍历vue中定义的编程语言languages,并将languages中的每项数据的code赋值给option的value,desc赋值给option的描述部分。

同时,select标签上绑定了languageSelected,用来接收和初始化数据。

默认选择

但上面的写法有一个问题,就是默认没有选择项,显示空白。那么如何提供默认的选择数据呢。有几种方法可供选择。

第一,通过created方法来初始化languageSelected数据,修改之后的代码如下:

var app = new Vue({
        el: "#app",
        data: {
            languages: [
                {
                    code: 'Java',
                    desc: 'Java语言'
                },
                {
                    code: 'Python',
                    desc: 'Python语言'
                },
                {
                    code: 'PHP',
                    desc: 'PHP语言'
                }
            ],
            languageSelected: null
        },
        created() {
            this.languageSelected = this.languages[1].code;
        }
    })

这样,在初始化的时候,将languageSelected赋值,vue会自动匹配并进行绑定变更。当然这里只是直接获得数组中的数据,在实践的过程中,往往是获得服务器的数据。

第二种方案:直接初始化时赋值languageSelected,实例代码如下:

var app = new Vue({
        el: "#app",
        data: {
            languages: [
                {
                    code: 'Java',
                    desc: 'Java语言'
                },
                {
                    code: 'Python',
                    desc: 'Python语言'
                },
                {
                    code: 'PHP',
                    desc: 'PHP语言'
                }
            ],
            languageSelected: 'PHP'
        }
    })

这种方案与第一种方案差不多,只不过初始化时机不同。

change事件

经过上面的方式以及进行select的初始化和默认项选择,那么如何监听select的选中事件并进行相应的操作呢。在vue中,直接获取对应的绑定值即可。

首先通过@change绑定监听事件selectChanged,并在vue的method中定义对应的方法。

<select id="languages" v-model="languageSelected" @change="selectChanged">
        <option :value="language.code" v-for="language in languages">{{language.desc}}</option>
    </select>
methods: {
            selectChanged: function () {
                console.log(app.languageSelected);
            }
        }

在定义的方法中打印了当前被选中的option的值。其他业务逻辑可根据此值进行相应的操作。

完整代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue中Select选择框及change事件,默认选择</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>

<body>
<H1>Select选择框极其值获取,默认选择</H1>

<div id="app">
    <label for="languages">编程语言:</label>
    <select id="languages" v-model="languageSelected" @change="selectChanged">
        <option :value="language.code" v-for="language in languages">{{language.desc}}</option>
    </select>
</div>

<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            languages: [
                {
                    code: 'Java',
                    desc: 'Java语言'
                },
                {
                    code: 'Python',
                    desc: 'Python语言'
                },
                {
                    code: 'PHP',
                    desc: 'PHP语言'
                }
            ],
            languageSelected: null
        },
        created() {
            this.languageSelected = this.languages[1].code;
        },
        methods: {
            selectChanged: function () {
                console.log(app.languageSelected);
            }
        }
    })
</script>
</body>
</html>


vue中select的使用、默认选择、onchange/change事件等操作实例插图

关注公众号:程序新视界,一个让你软实力、硬技术同步提升的平台

除非注明,否则均为程序新视界原创文章,转载必须以链接形式标明本文链接

本文链接:https://www.choupangxia.com/2019/09/24/vue%e4%b8%adselect%e7%9a%84%e4%bd%bf%e7%94%a8%e3%80%81%e9%bb%98%e8%ae%a4%e9%80%89%e6%8b%a9%e3%80%81onchange-change%e4%ba%8b%e4%bb%b6%e7%ad%89%e6%93%8d%e4%bd%9c%e5%ae%9e%e4%be%8b/