Question

我已经看过这些文档了，但是我仍然没有弄清楚如何将它放在工作中，基本上在开始时我只是想用vue.js显示一个特定的类，我后来想要动态地改变，我只是想要设置该类的默认行为，所以我做了类似这样的事情：

HTML

<div class="row">
   <h1 class="text-center title">YOU</h1>
   <div class="col-md-offset-1 col-md-10">
      <div :class="progressYou">asd</div>
   </div>
</div>

<div class="row">
    <div class="col-md-offset-1 col-md-10">
        <div :class="progressMonster">asd</div>
     </div>
</div>

CSS

.progressYou{
    width: '100px';
    background-color: 'green';
    height: '50px';
}

.progressMonster{
    width: '100px';
    background-color: 'green';
    height: '50px';
}

的javascript

new Vue({
    el: '#monsterGame',
    data: {
        incrementMonster: 0,
        incrementYou: 0,
        progressMonster: {
            'width': '100px',
            'background-color': 'green',
            'height': '50px'
        },
        progressYou: {
            'width': '100px',
            'background-color': 'green',
            'height': '50px'
        }

    }
})

我需要在css中附加它吗？我基本上想在我的CSS上使用一个类，并通过我在javascript端的数据上创建的对象来动态地改变它，但我看不到任何东西： S，我做错了什么？

Answer 1

您正在使用the v-bind:class directive，但您的参数不是类名，而是样式规范。

此外，您的CSS还有不必要的引号。

＆＃13;

new Vue({
  el: '#monsterGame',
  data: {
    incrementMonster: 0,
    incrementYou: 0,
    className: 'progressMonster'
  },
  methods: {
    toggleClass: function () {
      this.className = this.className === 'progressMonster' ? 'progressYou' : 'progressMonster';
    }
  }
})

＆＃13;

.progressYou {
  width: 100px;
  color: white;
  background-color: green;
  height: 50px;
}

.progressMonster {
  color: black;
  width: 100px;
  background-color: lightblue;
  height: 50px;
}

＆＃13;

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.js"></script>
<div id="monsterGame">
  <div class="row">
    <h1 class="text-center title">YOU</h1>
    <div class="col-md-offset-1 col-md-10">
      <div :class="[className]">asd</div>
    </div>
  </div>

  <div class="row">
    <div class="col-md-offset-1 col-md-10">
      <div :class="[className]">asd</div>
    </div>
  </div>
  <button @click="toggleClass">Switch</button>
  
  
</div>

＆＃13;

使用：class应用一个类

1 个答案: