Vue.js中v-for和v-if⼀起使⽤，来判断select中的option为选中项【开发记录】
1、刚写了⼀篇有关地址管理页⾯的总结，其中有如何判断多个radio中哪⼀个radio被checked和实现点击radio以后选中或取消，有兴趣的可以看下：，⽹上有很多Vue.js使⽤v-for和v-if在多个select中判断哪⼀个option被选中的例⼦，但是不是特别的详细，其实select和radio原理上实现⽅式是⼤体是相同的，趁着⼿热，下⾯就来继续做⼀个⼩demo来记录⼀下。
2、思路：⾸先通过v-for循环将数据添加到select中，并为元素添加⼀个value属性，将能区分selected哪个option的数据添加到value中（我们这⾥是将每个option的id存放到value中），这个值⽅便我们后期判断我们到底选中了哪个option，再为元素添加@change事件，当select改变时会调⽤@change⽅法，然后并将当前selected的option的dom对象以参数的形式传递到method中（我们这⾥是changeVal ⽅法），在⽅法中将id赋值给data中selOption（说明当前id的option被选中了），然后通过v-model来将data中的selOption、select和下⾯div中的显⽰数据同步（这步是为了在页⾯上显⽰数据，其实不要也罢，看实际需求）。
3、demo代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="div">
<select @change="changeVal($event)"v-model="selOption">
<template v-for="(site,index) in sites":key="index">
<option :value="site.id">{{site.name}}</option>
</template>
</select>
<div>您选中了:{{selOption}}</div>
</div>
</body>
<script src="/vue/2.4.2/vue.min.js"></script>
<script src="/vue-resource/1.5.1/vue-resource.min.js"></script>
<script>
var vm =new Vue({
el:"#div",
data:{
selOption:"",
sites:[
{id:1,name:"北京"},
{id:2,name:"上海"},
{id:3,name:"⼴州"},
{id:4,name:"深圳"},
{id:5,name:"吉林"}
]
},
methods:{
changeVal:function(event){
this.selOption = event.target.value;
alert("你选中了"+this.selOption);
}
}
})
</script>
</html>
4、说明：
1）这⾥的data中的数据是写死的，实际开发中应该使⽤mounted来声明⼀个⽅法，然后在⽅法中通过ajax去后端获取并赋值到data中，实现数据为动态数据。
2）还有就是Vue.js是通过$event的⽅式来传递当前元素的dom对象，并在⽅法中以event参数的形式接受，并以event.target的⽅式使⽤该对象。jquery在一个元素后追加标签
你要去做⼀个⼤⼈，不要回头，不要难过。
“你为什么皱着眉头呀，不开⼼嘛，能不能跟我说说呢。”

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。