Javascript 在v-for中使用VueJs2切换元素类,这是正确的方法吗?
我阅读了VueJs文档,它建议使用Javascript 在v-for中使用VueJs2切换元素类,这是正确的方法吗?,javascript,vuejs2,Javascript,Vuejs2,我阅读了VueJs文档,它建议使用computed属性来计算或切换元素类,但我无法在v-for循环中执行。我所做的是: 模板 <li v-bind:click="onClick(word)" v-bind:class="calculateClass(word)" v-for="word in words">{{ word.name }}</li> 它正在工作,但是这种方法有问题吗?我没有看到其他使用方法计算类的示例。我是否应该使用计算的执行此操作?怎么用?有更好的办
computed
属性来计算或切换元素类,但我无法在v-for
循环中执行。我所做的是:
模板
<li v-bind:click="onClick(word)" v-bind:class="calculateClass(word)" v-for="word in words">{{ word.name }}</li>
它正在工作,但是这种方法有问题吗?我没有看到其他使用方法计算类的示例。我是否应该使用
计算的执行此操作?怎么用?有更好的办法吗 正确的是,计算属性不能接受参数,因此不适合这种情况
以你现在的方式使用一种方法没有什么错
data: {
words : [{name:'ali', clicked : 1},{name:'sara', clicked : 0},{name:'marya', clicked : 1}]
},
methods: {
calculateClass : function (word) {
return {
"classA": word.clicked=== 1,
"classB" : word.clicked === 0,
'test' : true // allways return 'test' class
}
},
onClick: function (word) {
// changing the `clicked` property of related object in this.words array
for (var i in this.words) {
if (this.words[i].name === word.name) {
this.$set(this.words[i], 'clicked', 1)
break; //Stop this loop, we found it!
}
}
}
},