• 當前位置:首頁 > 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

    開通會員,享受整站包年服務
    国产呦精品一区二区三区网站|久久www免费人咸|精品无码人妻一区二区|久99久热只有精品国产15|中文字幕亚洲无线码