免费使用的招生小程序_vue表单绑定完成多选框和

vue表单绑定实现多选框和下拉列表的实例       本篇文章主要介绍了vue表单绑定实现多选框和下拉列表的实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

在vue的实际开发过程中，我们如何将以选中的值直接渲染到页面中，这次主要说的是多选框和下拉列表的实现：

 label 测试多选渲染： /label 
 div 
 template v-for="item in chks" 
 input type="checkbox" name="hobby" :value="item.id" 
 :checked="loo凡科抠图ss.indexOf(item.id) -1"/ {{item.name}}
 /template 
 /div 
 label 下拉列表测试： /label 
 div 
 select multiple 
 template v-for="item in chks" 
 option type="checkbox" name="hobby" :value="item.id" 
 :selected="loo凡科抠图ss.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:"学习"}
 loo凡科抠图ss:''
 mounted: function () {
 this.init()
 methods: {
 init: function () {
 var arr = [1,2,4]//假设这是被选中的爱好
 this.loo凡科抠图ss = arr
 /script 

上述实现方式主要是借助indexOf方法去检索id在值在数组中是否可以找到，如果找到，则给checked和selected属性设置true值，这样对应的值就可以被选中。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持凡科。