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