當前位置：首頁 > 前端技术 > vue >内容正文

vue

Vue003_class 与style 绑定

發布時間：2024/2/28 vue 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue003_class 与style 绑定小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

class 與style 綁定

理解

1) 在應用界面中, 某個(些)元素的樣式是變化的
2) class/style 綁定就是專門用來實現動態樣式效果的技術

class 綁定

1) :class='xxx'
2) 表達式是字符串: 'classA'
3) 表達式是對象: {classA:isA, classB: isB}
4) 表達式是數組: ['classA', 'classB']

style 綁定

1) :style="{ color: activeColor, fontSize: fontSize + 'px' }"
2) 其中activeColor/fontSize 是data 屬性

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style>.classA{color: red;}.classB{background: blue;}.classC {font-size: 20px;}</style></head><body><div id="demo"><h2>1.class綁定::class='xxx'</h2><p class="classB" :class="a">表達式是字符串：'classA'</p><p :class="{classA: isA,classB: isB}"></p><p :class="['classA','classB']">表達式是數組：['classA','classB']</p><h2>2.style綁定</h2><p :style="{color,fontSize}">style="{color: activeColor,fontSize: fontSize + 'px'}"</p><button @click="update" ></button></div><script type="text/javascript" src="js/vue.js"></script><script>new Vue({el: '#demo',data: {a:'classA',isA: true,isB: false,color: 'red',fontSize: '20px'},methods: {update() {this.a = 'classC'this.isA = falsethis.isB = truethis.color = 'blue'this.fontSize = '30px'}}})</script></body> </html>

結果展示

總結

以上是生活随笔為你收集整理的Vue003_class 与style 绑定的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。