快捷導(dǎo)航

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

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

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

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

<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 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:"睡覺"},
     {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è)這是被選中的愛好
    this.loopsss = arr
   }
  }
 }
</script>

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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