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

2021-01-11 15:26 admin
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值,这样对应的值就可以被选中。

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