vue表單綁定實現(xiàn)多選框和下拉列表的實例
更新時間：2017年08月12日 08:31:40 作者：朦dada
本篇文章主要介紹了vue表單綁定實現(xiàn)多選框和下拉列表的實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
在vue的實際開發(fā)過程中，我們如何將以選中的值直接渲染到頁面中，這次主要說的是多選框和下拉列表的實現(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:"學習"}
],
loopsss:''
}
},
mounted: function () {
this.init()
},
methods: {
init: function () {
var arr = [1,2,4]//假設這是被選中的愛好
this.loopsss = arr
}
}
}
</script>
上述實現(xiàn)方式主要是借助indexOf方法去檢索id在值在數(shù)組中是否可以找到，如果找到，則給checked和selected屬性設置true值，這樣對應的值就可以被選中。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
組合式API為Vue3帶來了更好的邏輯組織和復用性,支持TypeScript,提供靈活的響應式系統(tǒng),它允許開發(fā)者將相關邏輯組合在一起,通過composable函數(shù)實現(xiàn)邏輯復用,擺脫了mixin的缺點,同時,組合式API與TypeScript的集成更緊密,能夠提供更準確的類型推斷2024-10-10
vue前端測試開發(fā)watch監(jiān)聽data的數(shù)據(jù)變化
這篇文章主要為大家介紹了vue測試開發(fā)watch監(jiān)聽data的數(shù)據(jù)變化，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-05-05
跳轉到指定URL,向history棧添加一個新的紀錄,點擊后退會返回至上一個頁面,這篇文章給大家介紹vue如何跳轉到其他頁面,包括無參跳轉和帶參跳轉,本文結合實例代碼給大家介紹的非常詳細,需要的朋友參考下吧2023-10-10
vue3 Element-Plus el-backtop無效問題及解決
這篇文章主要介紹了vue3 Element-Plus el-backtop無效問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue3?中一個組件從創(chuàng)建到掛在,會經過3個重點步驟：創(chuàng)建組件實例,設置組件實例,創(chuàng)建并執(zhí)行帶副作用的渲染函數(shù),本文將著重講清?創(chuàng)建組件實例、設置組件實例?這兩個過程都做了什么,這部分邏輯很簡單,但你會從中學習到?Vue?優(yōu)秀的實踐技巧,需要的朋友可以參考下2024-07-07
vite+vue3項目啟動報錯Unexpected?“%“問題及解決
這篇文章主要介紹了vite+vue3項目啟動報錯Unexpected?“%“問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
本文主要介紹了Vue實現(xiàn)自定義右擊刪除菜單的示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-02-02
這篇文章主要介紹了Vue2和Vue3的10種組件通信方式梳理，本文將通過選項式API?組合式API以及setup三種不同實現(xiàn)方式全面介紹Vue2和Vue3的組件通信方式，需要的朋友可以參考一下2022-08-08
本篇文章主要介紹了使用vue制作FullPage頁面滾動效果，詳細的介紹了FullPage頁面的思路和實現(xiàn)，有興趣的可以了解一下2017-08-08
使用Vue+MySQL實現(xiàn)登錄注冊的實戰(zhàn)案例
第一次用Vue+MySQL實現(xiàn)注冊登錄功能,就已經踩了很多坑,下面這篇文章主要給大家介紹了關于使用Vue+MySQL實現(xiàn)登錄注冊案例的相關資料,需要的朋友可以參考下2022-05-05