vue表单绑定实现多选框和下拉列表的实例

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

成都创新互联2013年至今，是专业互联网技术服务公司，拥有项目网站制作、成都网站制作网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元广水做网站,已为上家服务,为广水各地企业和个人服务,联系电话:13518219792

<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 >
  <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值，这样对应的值就可以被选中。

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

本文题目：vue表单绑定实现多选框和下拉列表的实例
浏览路径：https://www.cdcxhl.com/article30/pdpiso.html

成都网站建设公司_创新互联，为您提供网站营销、移动网站建设、云服务器、静态网站、服务器托管、虚拟主机

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容