Question

基本上我有一个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呢？

Answer 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>

Answer 2

试试这个

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

Please see documentation for details

Answer 3

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

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

在docs中阅读更多内容。

应用多个类无法正常工作

3 个答案: