VUE学习-:class & :style
生活随笔
收集整理的這篇文章主要介紹了
VUE学习-:class & :style
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
:class & :style
:class
鍵值對
<div id="app" v-bind:class="{ 'active': isActive }"></div>
<script>
new Vue({
el:'#app',
data:{isActive:true}
})
</script>
對象
<div id="app" v-bind:class="classObj"></div>
<script>
new Vue({
el:'#app',
data:{
classObj:{active:true}
}
})
</script>
計算屬性
<div id="app" v-bind:class="classObj"></div>
<script>
new Vue({
el:'#app',
computed:{
classObject(){
return {active:true}
}
}
})
</script>
數組
<div id="app" v-bind:class="[activeClass, errClass]"></div>
<script>
new Vue({
el:'#app',
data:{
activeClass:'active',
errClass: 'text-danger'
}
})
</script>
數組+對象
<div id="app" v-bind:class="[{'active':isActive}, errClass]"></div>
<script>
new Vue({
el:'#app',
data:{
isActive:true,
errClass: 'text-danger'
}
})
</script>
:style
特點：
- 自動添加前綴。當 v-bind:style 使用需要添加瀏覽器引擎前綴的 CSS property 時，如 transform，Vue.js 會自動偵測并添加相應的前綴。
- 多重值。為 style 綁定中的 property 提供一個包含多個值的數組，常用于提供多個帶前綴的值。這樣寫只會渲染數組中最后一個被瀏覽器支持的值。
值
對象
<div id="app" v-bind:style="{ color: activeColor }"></div>
<script>
new Vue({
el:'#app',
data:{activeColor:red}
})
</script>
數組
<div id="app" v-bind:style="[base,read]"></div>
<script>
new Vue({
el:'#app',
data:{
base:{color:blue},
read:{color:purple}
}
})
</script>
總結
以上是生活随笔為你收集整理的VUE学习-:class & :style的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【VS Code 与 Qt6】QActi
- 下一篇： Code Generate V2.0 代