VUE：class与style强制绑定
生活随笔
收集整理的這篇文章主要介紹了
VUE：class与style强制绑定
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>.aClass{color:red;}.bClass{color:blue;}.cClass{font-size: 30px;}</style></head><body><!--1.理解在應用界面中，某個（些）元素的樣式是變化的class/style綁定就是專門用來實現動態樣式效果的技術2.class綁定：class='xxx'xxx是字符串xxx是對象xxx是數組3.style綁定:style="{color: activeColor,fontSize: fontSize+'px'}"其中activiColor/fontSize是data屬性--><div id="app"><h2>1.class綁定：：class='xxx'</h2><p class="cClass" :class="a">xxx是字符串</p><p :class="{aClass:isA,bClass:isB}">xxx是對象</p><p :class="['aClass','cClass']">xxx是數組</p><h2>2.style綁定</h2><p :style="{color: activeColor,fontSize: fontSize+'px'}">: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:"#app",data:{a:'aClass',isA:true,isB:false,activeColor:'red',fontSize:20},methods:{update(){this.a='bClass',this.isA=false,this.isB=true,this.activeColor='green';this.fontSize=30}}})</script></body>
</html>
?
轉載于:https://www.cnblogs.com/it-taosir/p/9886995.html
總結
以上是生活随笔為你收集整理的VUE：class与style强制绑定的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： loadrunner与事务有关的函数
- 下一篇： split函数