vue中select的使用、默认选择、onchange/change事件等操作实例
本节重点
- 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>
关注公众号：程序新视界，一个让你软实力、硬技术同步提升的平台
除非注明，否则均为程序新视界原创文章，转载必须以链接形式标明本文链接
