为啥 v-bind:class 不起作用?

Posted

技术标签:

【中文标题】为啥 v-bind:class 不起作用?【英文标题】:Why v-bind:class not working?为什么 v-bind:class 不起作用? 【发布时间】:2018-03-06 07:19:18 【问题描述】:

我正在学习 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>

提前致谢!

【问题讨论】:

我已将您的代码转换为 sn-p,看看它的工作原理 如果你想在 div 上绑定类,在 div 上添加 v-bind:class 而不是

。见jsfiddle.net/e760kqhj

【参考方案1】:

完美运行,见 codepen 示例:

https://codepen.io/martiensk/pen/boBPKQ

生成的代码是:

<div id="result">
    <p class="red">Hello</p>
</div>

问题不在于您的 Vue 代码,而在于其他地方。

【讨论】:

我在我的电脑上离线运行了代码,它似乎不起作用:(( @DunDev 如果你离线运行它,可能在本地包含源而不是来自 CDN,即 ?如果您处于离线状态,脚本将不会下载。 你需要在本地机器上设置 vue-cli【参考方案2】:

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://vuejs.org/v2/api/#Options-Data

【讨论】:

这不起作用,也不是 OP 所要求的。【参考方案3】:

请在 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
  
)

【讨论】:

【参考方案4】:

告诉你cache它会完美运行。

在浏览器隐身模式下查看。

【讨论】:

以上是关于为啥 v-bind:class 不起作用?的主要内容,如果未能解决你的问题,请参考以下文章

Angular 的 $http.post 不起作用,它的 $http... 也不起作用,但 jQuerys ajax 起作用。为啥?

为啥 preventDefault 不起作用?

为啥 innerHtml 不起作用

为啥(ngModel)不起作用?

css 为啥有时MARGIN 不起作用,

为啥我的poi autoSizeColumn()不起作用