五十九、Vue中的样式绑定
@Author：Runsen
@Date：2020/10/16
大四是一個(gè)焦慮的時(shí)期。煩惱有時(shí)候是具體問題帶來的壓力，有時(shí)候卻是無端的、莫名其妙的，有時(shí)候還極易受到外界的影響，別人一句話就會激起內(nèi)心難以遏制的波瀾。
大四我的目標(biāo)棄算法，轉(zhuǎn)前端。要求在一個(gè)多月提升自己的前端能力。
文章目錄
- 綁定Class
- 對象語法
- 數(shù)組語法
- 綁定內(nèi)聯(lián)樣式
今天加深Vue的學(xué)習(xí)，主要學(xué)習(xí)Vue中的樣式綁定。其中
綁定Class
在數(shù)據(jù)綁定中，最常見就是動態(tài)綁定元素的 class 或內(nèi)聯(lián)樣式 style 咯，它們也是 HTML 的屬性，所以可以使用 v-bind 指令 。
對象語法
第1種使用方式：對象語法
傳遞一個(gè)js表達(dá)式，組值寫類名就行了，但class 需要使用v-bind（簡寫為“:”）做數(shù)據(jù)綁定。
下面實(shí)現(xiàn)點(diǎn)擊Hello World，字體顏色就變化的點(diǎn)擊事件
<head><meta charset="UTF-8"><title>Document</title><style>.activated{color: red;}</style> </head> <body><div id="app"><!-- 綁定js表達(dá)式，如果isActivated為true，那么activated的類名就會顯示出來:class 對象語法--><div @click="HandleDivClick":class="{activated:isActivated}">Hello World</div></div><script>var vm = new Vue({el : "#app",data:{isActivated:false},methods: {HandleDivClick:function(){this.isActivated = !this.isActivated}},})</script> </body>數(shù)組語法
第2種使用方式：數(shù)組語法
傳遞一個(gè)js表達(dá)式，組值寫類名就行了，但class 需要使用v-bind（簡寫為“:”）做數(shù)據(jù)綁定。
<head><meta charset="UTF-8"><title>Vue中的樣式綁定</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><style>.activated{color: red;}</style> </head> <body><div id="app"><!-- 傳遞一個(gè)數(shù)組，組值寫類名就行了，但class 需要使用v-bind（簡寫為“:”）做數(shù)據(jù)綁定。 --><div @click="HandleDivClick":class="[activated]">Hello World</div></div><script>var vm = new Vue({el : "#app",data:{activated:""},methods: {HandleDivClick:function(){// if (this.activated === ""){// this.activated = "activated"// }else{// this.activated = ""// }// 三元運(yùn)算符this.activated = this.activated === "" ? "activated" : ""}},})</script> </body>綁定內(nèi)聯(lián)樣式
1、第一種： 通過對象 如:style="styleObj"
<body><div id="app"><div :style="styleobj" @click="HandleDivClick">Hello World</div></div><script>var vm = new Vue({el: "#app",data:{styleobj:{// 對象styleobj color:"black"}},methods: {HandleDivClick:function(){this.styleobj.color = this.styleobj.color === "black" ? "red" : "black"}},})</script> </body>第二種： 通過數(shù)組 如:style="[ styleObj , {fontSize: '20px'}]"
<body><div id="app"><div :style="[styleobj, {fontSize:'20px'}]" @click="HandleDivClick">Hello World</div></div><script>var vm = new Vue({el: "#app",data:{styleobj:{// 對象styleobj color:"black"}},methods: {HandleDivClick:function(){this.styleobj.color = this.styleobj.color === "black" ? "red" : "black"}},})</script> </body>參考
- 官方文檔：https://cn.vuejs.org/v2/guide/class-and-style.html
- https://mp.weixin.qq.com/s/P_CLyjWRW2f6ALnfYOfg0g
- 慕課網(wǎng)Vue2.5->2.6->3.0 開發(fā)去哪兒網(wǎng)App 從零基礎(chǔ)入門到實(shí)戰(zhàn)項(xiàng)目開發(fā)：https://coding.imooc.com/learn/list/203.html
我現(xiàn)在內(nèi)心里的想法，就是希望你們接下來這一年不被虛度。這是你們?nèi)松凶蠲篮脮r(shí)代中的一年，它不是拿來過渡、等待或者犧牲的。現(xiàn)在這一年才剛剛開始。
總結(jié)
以上是生活随笔為你收集整理的五十九、Vue中的样式绑定的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 外省的军人优待证在中山可以坐公交车吗
- 下一篇： 子弹的飞行时间怎么计算？