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

更新時(shí)間：2017年08月12日 08:31:40 作者：朦dada

本篇文章主要介紹了vue表單綁定實(shí)現(xiàn)多選框和下拉列表的實(shí)例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

在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 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:"睡覺(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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Element+Vue實(shí)現(xiàn)動(dòng)態(tài)表單多個(gè)下拉框組件功能
這篇文章主要介紹了Element+Vue實(shí)現(xiàn)動(dòng)態(tài)表單多個(gè)下拉框組件功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-07-07
Vue.js項(xiàng)目部署到服務(wù)器的詳細(xì)步驟
這篇文章給大家介紹了Vue.js項(xiàng)目部署到服務(wù)器的詳細(xì)步驟，既然是部署到服務(wù)器，肯定是需要一個(gè)云的。具體思路步驟大家可以參考下本文
2017-07-07
vue項(xiàng)目登錄成功后退出時(shí)清空sessionId和userId的問(wèn)題
這篇文章主要介紹了vue項(xiàng)目登錄成功后退出時(shí)清空sessionId和userId的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-12-12
5個(gè)實(shí)用的Vue技巧分享
在這篇文章中,我們將探討五個(gè)實(shí)用的?Vue?技巧,這些技巧可以使你日常使用?Vue?編程更高效、更富有成效,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2023-08-08
Vue.js項(xiàng)目在apache服務(wù)器部署問(wèn)題解決
本文主要介紹了Vue.js項(xiàng)目在apache服務(wù)器部署問(wèn)題解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-06-06
Vue.extend實(shí)現(xiàn)組件庫(kù)message組件示例詳解
這篇文章主要為大家介紹了Vue.extend實(shí)現(xiàn)組件庫(kù)message組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
vue項(xiàng)目開(kāi)發(fā)中setTimeout等定時(shí)器的管理問(wèn)題
這篇文章主要介紹了vue項(xiàng)目開(kāi)發(fā)中setTimeout等定時(shí)器的管理問(wèn)題,需要的朋友可以參考下
2018-09-09
vue-element-admin 全局loading加載等待
本文主要介紹了vue-element-admin 全局loading加載等待，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
vue項(xiàng)目運(yùn)行npm?install報(bào)錯(cuò)問(wèn)題及解決
這篇文章主要介紹了vue項(xiàng)目運(yùn)行npm?install報(bào)錯(cuò)問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-08-08
el-table實(shí)現(xiàn)嵌套表格的展示功能(完整代碼)
el-table中在嵌套一個(gè)el-table,這樣數(shù)據(jù)格式就沒(méi)問(wèn)題了,主要就是樣式,將共同的列放到一列中,通過(guò)渲染自定義表頭render-header,將表頭按照合適的寬度渲染出來(lái),本文給大家分享el-table實(shí)現(xiàn)嵌套表格的展示功能,感興趣的朋友一起看看吧
2024-02-02