应用多个类无法正常工作答案

【问题标题】：Apply multiple classes doesn't work properly应用多个类无法正常工作
【发布时间】：2017-07-26 18:03:33
【问题描述】：

基本上我有一个 div，并且想做一个练习，我使用 vue.js 应用 3 个不同的类，为此我尝试使用 v-bind:class，更准确地说：class，我可以直接绑定一个类吗来自css？

我做过类似的事情

html

<div :style="[myClass1,myClass2,myClass3]">I got no class :(</div>

css

.myClass1 {
  background-color: black;
  width: 200px !important;
  height: 200px !important;
}

.myClass2 {
  border: 2px solid red;
}

.myClass3 {
  padding: 2px 2px 2px 2px;
}

Javascript

new Vue({
  el: '#exercise',
  data: {
    effect: true,
  },
  methods: {
    startEffect: function() {
      var vm = this;
      setInterval(function(){
        vm.effect = !vm.effect;
        console.log(this.effect);
      },1000);
    }
  }
});

所以如果我不能直接绑定类，我怎么能用 vue.js 做到这一点？

【问题讨论】：

标签： javascript html css vue.js vuejs2

【解决方案1】：

查看documentation获取动态类的数组语法，你必须在代码中使用v-bind:class。

new Vue({
  el: '#exercise',
  data: {
    effect: true
  },
  methods: {
    startEffect: function() {
      var vm = this;
      setInterval(function(){
        vm.effect = !vm.effect;
        console.log(this.effect);
      },1000);
    }
  }
});

.myClass1 {
  background-color: red;
  width: 200px !important;
  height: 200px !important;
}

.myClass2 {
  border: 2px solid red;
}

.myClass3 {
  padding: 2px 2px 2px 2px;
}

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="exercise">
<div v-bind:class="['myClass1','myClass2','myClass3']">I got no class :(</div>
</div>

【讨论】：

【解决方案2】：

您将样式绑定到style，将类绑定到class。在 html 示例中，您尝试将类绑定到 style

此外，您列出类的方式，它们指向 js 示例中不存在的值。您应该将它们添加到 data 或用引号括起来：<div :class="['myClass1','myClass2','myClass3']">Yay, classes!</div>

在docs 中了解更多信息。

【讨论】：

【解决方案3】：

试试这个

<div v-bind:class="[myClass1,myClass2,myClass3]">I have your classes</div>

Please see documentation for details

【讨论】：