五十九、Vue中的样式绑定
生活随笔
收集整理的這篇文章主要介紹了
五十九、Vue中的样式绑定
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
@Author：Runsen
@Date：2020/10/16
大四是一個焦慮的時期。煩惱有時候是具體問題帶來的壓力，有時候卻是無端的、莫名其妙的，有時候還極易受到外界的影響，別人一句話就會激起內心難以遏制的波瀾。
大四我的目標棄算法，轉前端。要求在一個多月提升自己的前端能力。
文章目錄
- 綁定Class
- 對象語法
- 數組語法
- 綁定內聯樣式
今天加深Vue的學習，主要學習Vue中的樣式綁定。其中
綁定Class
在數據綁定中，最常見就是動態綁定元素的 class 或內聯樣式 style 咯，它們也是 HTML 的屬性，所以可以使用 v-bind 指令 。
對象語法
第1種使用方式：對象語法
傳遞一個js表達式，組值寫類名就行了，但class 需要使用v-bind（簡寫為“:”）做數據綁定。
下面實現點擊Hello World，字體顏色就變化的點擊事件
<head><meta charset="UTF-8"><title>Document</title><style>.activated{color: red;}</style> </head> <body><div id="app"><!-- 綁定js表達式，如果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>數組語法
第2種使用方式：數組語法
傳遞一個js表達式，組值寫類名就行了，但class 需要使用v-bind（簡寫為“:”）做數據綁定。
<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"><!-- 傳遞一個數組，組值寫類名就行了，但class 需要使用v-bind（簡寫為“:”）做數據綁定。 --><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 = ""// }// 三元運算符this.activated = this.activated === "" ? "activated" : ""}},})</script> </body>綁定內聯樣式
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>第二種： 通過數組 如: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
- 慕課網Vue2.5->2.6->3.0 開發去哪兒網App 從零基礎入門到實戰項目開發：https://coding.imooc.com/learn/list/203.html
我現在內心里的想法，就是希望你們接下來這一年不被虛度。這是你們人生中最美好時代中的一年，它不是拿來過渡、等待或者犧牲的。現在這一年才剛剛開始。
總結
以上是生活随笔為你收集整理的五十九、Vue中的样式绑定的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 外省的军人优待证在中山可以坐公交车吗
- 下一篇： 子弹的飞行时间怎么计算？