Question

我有一个Vue实例，它具有两个数据属性：error（最初设置为false）和classArray（它是一个包含两个类的对象）：和btn。

btn-success设置为btn并且 true设置为btn-success，最初是error。

我有两个false元素，两个元素都是按钮，其中第一个元素的类别设置为input。

单击另一个按钮，将调用附加到我的Vue实例的方法，该方法应该切换classArray（因此，如果error为error，则它变为{{1} }，反之亦然。

我的期望是，由于true中的false设置为btn-success的值，因此在切换classArray的值时，相应的类应在我的第一个元素。

即使error的切换按预期进行，但在检查第一个元素时，似乎没有添加error类。

这里是否缺少某些内容，或者您不能为此类元素添加类吗？

此外，这是我用来测试此代码的代码：

error

btn-success

Answer 1

问题在于，btn-success的值仅在首次创建数据对象时才设置为true，并且此后不会更改，因此更改this.error不会对{ {1}}。相反，您可以将classArray设置为计算属性，并且只要classArray更新，它就会自动更新。

this.error

var app = new Vue({
  el: '#app',
  computed : {
    classArray(){
      return {
        btn : true,
        'btn-succes' : this.error
      }
    }
  },
  data: {
    error: false,
  },
  methods: {
    toggle: function() {
      this.error = !this.error;
      console.log(document.getElementById('input1'));
    }
  }
});

这只是个人喜好，但我个人喜欢以这种样式使用内联类（强调重点）。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id="app">
  <input type='button' id='input1' :class='classArray' value='Submit' />
  <input type='button' @click='toggle' value='Change class' />
</div>

以这种方式进行操作意味着，当您有更多需要变量类的元素时，可以避免添加大量计算属性。

Vue.js-根据对数据属性的更改来更改元素的类

1 个答案: