html 为什么v-bind：类不工作？

pkmbmrz7 于 2022-12-16 发布在其他

关注(0)|答案(3)|浏览(153)

我正在学习VueJS中的v-bind：class，但是我遇到了一些问题。

var myApp = new Vue({
  el: "#result",
  data: {
    isActive: true
  }
});

.red {
  color: red
}

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div id="result">
  <p v-bind:class="{red: isActive}">Hello</p>
</div>

我上面的代码有什么问题吗？正如我所希望的那样

<div class="red"></div>

先谢了！

Html

来源：https://stackoverflow.com/questions/46403206/why-v-bindclass-not-working

3条答案

按热度按时间

tsm1rwdh1#

请在JsFiddle在线编辑器上运行此代码。Link

<div id="app">
   <div class="box" :class="{bgColor: attache}" @click="attache = !attache">
     <p class="text" :class="{'txt-color': attache}">
       3
     </p>
   </div>
</div>

CSS代码

.box {
  height: 70px;
  width: 70px;
  background-color: green;
  display:flex;
  flex-direction: row;
  justify-content: center;
  align-items:center;
  cursor: pointer;
}

.text {
  font-size:18px;
  color: white;
}

.bgColor {
  background-color: #e8eaed;
}

.txt-color {
  color: #000;
}

JavaScript语言

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    attache: false
  }
})

型

赞(0）回复(0）举报 2022-12-16

gblwokeq2#

清除你cache它会完美地工作。
检查它在浏览器隐身模式。

赞(0）回复(0）举报 2022-12-16

vc9ivgsu3#

var myApp = new Vue({
  el: "#result",
  data: function(){
    return {
      isActive: true
    }
  }
});

.red {
  color: red
}

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div id="result">
  <div v-bind:class="{red: isActive}">Hello</div>
</div>

在元件定义中使用数据时，数据仅接受函数。

data: function(){
    return {
        isActive: true
    }
}

型
https://v2.vuejs.org/v2/api/#Options-Data

赞(0）回复(0）举报 2022-12-16

我来回答

html 为什么v-bind：类不工作？

3条答案

相关问题

热门标签

最新问答