赛富通怎么样,sqqovd,豪霸狼
在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值,这样对应的值就可以被选中。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
vue 路由懒加载中给 Webpack Chunks 命名的方法
网友评论