为啥 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;
new Vue(
el: '#app',
data:
message: 'Hello Vue.js!',
attache: false
)
【讨论】:
【参考方案4】:告诉你cache
它会完美运行。
在浏览器隐身模式下查看。
【讨论】:
以上是关于为啥 v-bind:class 不起作用?的主要内容,如果未能解决你的问题,请参考以下文章
Angular 的 $http.post 不起作用,它的 $http... 也不起作用,但 jQuerys ajax 起作用。为啥?