脚本宝典收集整理的这篇文章主要介绍了对vue的 v-for 循环中添加属性的方法的研究,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
刚开始写代码如下:(运行:http://jsbin.com/qonoliy/2/ed...)
<div id="test">
<div class="item" v-for="item in items" @click="toggle(item)" >
<div>{{item.name}}</div>
<div v-show="item.show">
初始隐藏
</div>
</div>
</div>
<script>
new Vue({
el: '#test',
data: {
items: [{
name: 'a',
show: false
}, {
name: 'b',
show: false
}, {
name: 'c',
show: false
}]
},
methods: {
toggle: function(item) {
item.show = !item.show;
}
}
});
</script>
由于data.items
是后端传过来的,没有show
这个字段, 无奈只好把 data.items
遍历添加 show
属性。(运行:http://jsbin.com/qonoliy/4/ed...)
var data = [{
name: 'a',
}, {
name: 'b',
}, {
name: 'c',
}];
data.map(function(item){
item.show = false;
});
new Vue({
el: '#test',
data: {
items: data
},
methods: {
toggle: function(item) {
item.show = !item.show;
}
}
});
对服务端数据进行遍历处理还是不太优雅,如果能够在v-for
循环中给 item 添加 show 属性就好了。
但是似乎不行。(运行:http://jsbin.com/qonoliy/5/ed...
@vingojw 提供了在触发 toggle 事件是添加属性的方法 (运行:http://jsbin.com/qonoliy/6/ed...)
toggle: function(item) {
Vue.set(item, 'show', this.show = !this.show);
}
@X-Ray 提出了一个个写法(运行:http://jsbin.com/qonoliy/7/ed...)
toggle: function($index) {
var item = this.items[$index];
var state = item.show;
var obj = $.extend(true, {}, item);
obj.show = !state;
this.items.$set($index, obj);
}
想起了 angluar 有个 ng-init 似乎可以做此事,vue 暂时没有 v-init 指令,那就自定义一个 v-init 指令
http://jsbin.com/qonoliy/8/ed...
angluar 使用 v-init 实现
http://jsbin.com/finayi/edit?...
以上是脚本宝典为你收集整理的对vue的 v-for 循环中添加属性的方法的研究全部内容,希望文章能够帮你解决对vue的 v-for 循环中添加属性的方法的研究所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。