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

vue

五十九、Vue中的样式绑定

發布時間：2024/10/8 vue 81 豆豆

生活随笔收集整理的這篇文章主要介紹了五十九、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"><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"><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中的样式绑定的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇：外省的军人优待证在中山可以坐公交车吗
下一篇：子弹的飞行时间怎么计算？