當前位置:首頁 > IT技術 > 編程語言 > 正文

8. Vue - v-bind 綁定 Style 【對象語法 和 數組語法】
2022-05-31 17:15:37

之前說過 v-bind 這東西可以綁class 那么必然也可以綁定實style 了,而且 也有 對象語法 和 數組語法:

?

先來對象語法:

因為我們知道 對象語句是 鍵 - 值 對的,所以呢 我們的鍵是 style 的屬性,值是對應的值即可,值可以是變量也可以是字符串,如果值不是Vue中的變量,值要加單引號!不然報錯.

?還有一個點: 比如字體大小 font-Size 其中可以省略掉-,有些版本不省略會報錯的.

Vue會當做一個變量來解析.?

例如我要字體大小50px 而且 字體顏色 是 紅色,那么:

錯誤寫法:

<div?class="app">
<!--????下面的是錯誤寫法,因為VUE會把?50px??和?red?當做一個變量來解析,找不到那就報錯了????-->
????????<p?:style="{fontSize:?50px,color:red}">顏色:red?字體大小:?50?px</p>
????</div>

正確寫法:

<div?class="app">
????????<p?:style="{fontSize:?'50px',color:'red'}">顏色:red?字體大?。?50?px</p>
????</div>

????<script>
????????const?app?=?new?Vue({
????????????el:".app",
????????})
????</script>

?

,所以你的值可以是一個變量:【在Vue中的data先定義哦】

<div?class="app">
????????<p?:style="{fontSize:?size?+?'px',color:fontColor}">顏色:red?字體大小:?50?px</p>
????</div>

????<script>
????????const?app?=?new?Vue({
????????????el:".app",
????????????data:{
????????????????size:50,
????????????????fontColor:"red"
????????????}
????????})
????</script>

?

所以呢 綁定這個有什么用,因為響應式 用戶就可以在你這里很快速選擇某些樣式 然后直接改變即可,復用性挺高.

?

數組語法:【比較不用】

因為我們知道數組是沒有鍵值對的 所以呢我們可以直接在數組里面加Vue的變量,變量里面都定義好的數據(鍵值對):

  

<div?class="app">
????????<p?:style="[color_red,font_size]">顏色:red?字體大?。?50?px</p>
????</div>

????<script>
????????const?app?=?new?Vue({
????????????el:".app",
????????????data:{
????????????????color_red:{color:'red'},
????????????????font_size:{fontSize:'50px'}
????????????}
????????})
????</script>

看代碼可知道 這樣的話肯定要先學對象語法,在學這玩意, 所以還不如直接用對象語法呢,

Tips:Vue中變量 定義 的鍵值可以有很多很多;上面定義了一個,所以主題邏輯就可以這樣寫了,

其次你完全也可以在數組里直接干[{xxx},{xx}] 但很畫蛇添足 沒用.

?


作者:??咸瑜???


本文摘自 :https://blog.51cto.com/u

開通會員,享受整站包年服務立即開通 >