在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值，这样对应的值就可以被选中。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。