Javascript Vue.js-更改元素'；s类基于对数据属性的更改

我有一个Vue实例，它有两个数据属性：

error

，它最初设置为

false

，和

classArray

，它是一个包含两个类的对象：

btn

和

btn success

---

btn

设置为

true

并且

btn success

设置为

error

，最初为

false

我有两个

input

元素，它们都是按钮，其中第一个元素的类设置为

classArray

单击另一个按钮时，将调用附加到我的Vue实例的方法，该方法应切换

错误

（因此，如果

错误

为

真

，则它将变为

假

，反之亦然）

我的期望是，由于

classArray

中的

btn success

设置为

error

的值，因此在切换

error

的值时，对应的类应该在我的第一个元素上处于活动状态

尽管

error

的切换按预期工作，但在检查第一个元素时，似乎没有添加

btn success

类

这里是否有我遗漏的东西，或者您不能像这样向元素添加类

另外，下面是我用来测试的代码：

var-app=新的Vue({
el:“#应用程序”，
数据：{
错误：false，
类数组：{
btn：没错，
“btn成功”：这是一个错误
}
},
方法：{
切换：函数（）{
this.error=！this.error；
log（document.getElementById（'input1'）；
}
}
});
问题在于，当数据对象第一次创建时，
btn success
的值仅设置为true一次，并且在创建之后不会更改，因此更改
此错误将不会对
classArray
产生任何影响。相反，您可以将
classArray
设置为计算属性，每当更新
this.error
时，它都会自动更新


var-app=新的Vue({
el:“#应用程序”，
计算：{
类数组（）{
返回{
btn：没错，
“btn成功”：这是一个错误
}
}
},
数据：{
错误：false，
},
方法：{
切换：函数（）{
this.error=！this.error；
log（document.getElementById（'input1'）；
}
}
});
问题在于，当数据对象第一次创建时，
btn success
的值仅设置为true一次，并且在创建之后不会更改，因此更改
此错误将不会对
classArray
产生任何影响。相反，您可以将
classArray
设置为计算属性，每当更新
this.error
时，它都会自动更新


var-app=新的Vue({
el:“#应用程序”，
计算：{
类数组（）{
返回{
btn：没错，
“btn成功”：这是一个错误
}
}
},
数据：{
错误：false，
},
方法：{
切换：函数（）{
this.error=！this.error；
log（document.getElementById（'input1'）；
}
}
});

所以每次
错误发生变化时都会重新计算
类数组
，然后？是的。通过组合属性，Vue知道
classArray
取决于
error
的值，并将在错误发生变化时对其进行更新。感谢您提供的参考；这非常有帮助！另外，处理类的巧妙方法：）因此每次
错误
更改时都会重新评估
类数组
，然后？是的。通过组合属性，Vue知道
classArray
取决于
error
的值，并将在错误发生变化时对其进行更新。感谢您提供的参考；这非常有帮助！还有，处理类的巧妙方法：）