[英]Why v-bind:class not working?
我正在學習 v-bind:class 在 VueJS 中,但我遇到了一些問題。 這是我的代碼
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>
提前致謝!
它完美運行,請參閱 codepen 示例:
https://codepen.io/martiensk/pen/boBPKQ
生成的代碼是:
<div id="result">
<p class="red">Hello</p>
</div>
問題不在於您的 Vue 代碼,而在於其他地方。
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
}
}
請在 JsFiddle 在線編輯器上運行此代碼。 關聯
<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
}
})
清除您的cache
,它將完美運行。
在瀏覽器隱身模式下檢查它。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.