之前說過 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}] 但很畫蛇添足 沒用.
?
作者:??咸瑜???