在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 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>上述實現方式主要是借助indexOf方法去檢索id在值在數組中是否可以找到,如果找到,則給checked和selected屬性設置true值,這樣對應的值就可以被選中。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。
新聞熱點
疑難解答