vue表单绑定实现多选框和下拉列表的实例
编程学习 2021-07-04 18:33www.dzhlxh.cn编程入门
本篇文章主要介绍了vue表单绑定实现多选框和下拉列表的实例，长沙网络推广觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随长沙网络推广过来看看吧
在vue的实际开发过程中，我们如何将以选中的值直接渲染到页面中，这次主要说的是多选框和下拉列表的实现：
<label>测试多选渲染：</label>
<div>
<template v-for="item in chks">
<input type="checkbox" name="hobby" :value="item.id"
:checked="loopsss.indexOf(item.id) > -1"/>{{item.name}}
</template>
</div>
<label>下拉列表测试：</label>
<div>
<select multiple style="width: 100px;">
<template v-for="item in chks">
<option type="checkbox" name="hobby" :value="item.id"
:selected="loopsss.indexOf(item.id) > -1">{{item.name}}
</option>
</template>
</select>
</div>
<script>
export default {
data () {
return {
chks: [
{id:1,name:"吃饭"},
{id:2,name:"睡觉"},
{id:3,name:"打豆豆"},
{id:4,name:"唱歌"},
{id:5,name:"学习"}
],
loopsss:''
}
},
mounted: function () {
this.init()
},
methods: {
init: function () {
var arr = [1,2,4]//假设这是被选中的爱好
this.loopsss = arr
}
}
}
</script>
上述实现方式主要是借助indexOf方法去检索id在值在数组中是否可以找到，如果找到，则给checked和selected属性设置true值，这样对应的值就可以被选中。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。