vue表單綁定實(shí)現(xiàn)多選框和下拉列表的實(shí)例

發(fā)布時(shí)間：2020-10-21 01:00:50 來(lái)源：腳本之家閱讀：125 作者：朦dada 欄目：web開(kāi)發(fā)

在vue的實(shí)際開(kāi)發(fā)過(guò)程中，我們?nèi)绾螌⒁赃x中的值直接渲染到頁(yè)面中，這次主要說(shuō)的是多選框和下拉列表的實(shí)現(xiàn)：

<label>測(cè)試多選渲染：</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>下拉列表測(cè)試：</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:"睡覺(jué)"},
     {id:3,name:"打豆豆"},
     {id:4,name:"唱歌"},
     {id:5,name:"學(xué)習(xí)"}
    ],
    loopsss:''
   }
  },
  mounted: function () {
   this.init()
  },
  methods: {
   init: function () {
    var arr = [1,2,4]//假設(shè)這是被選中的愛(ài)好
    this.loopsss = arr
   }
  }
 }
</script>

上述實(shí)現(xiàn)方式主要是借助indexOf方法去檢索id在值在數(shù)組中是否可以找到，如果找到，則給checked和selected屬性設(shè)置true值，這樣對(duì)應(yīng)的值就可以被選中。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

vue表單綁定實(shí)現(xiàn)多選框和下拉列表的實(shí)例

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽