溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在vue的實際開發過程中，我們如何將以選中的值直接渲染到頁面中，這次主要說的是多選框和下拉列表的實現：
<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值，這樣對應的值就可以被選中。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
