08.新手入門vue之v-bind

v-bind指令

用於綁定標籤的任何屬性，當一個標籤的某個屬性是一個變量時，可以使用v-bind綁定。

語法

v-bind:綁定的屬性名="data中的屬性"

簡寫 去掉v-bind即可 :綁定的屬性名="data中的屬性"

v-bind綁定標籤屬性

<code>


    
    
    <title>Document/<title>


    

        
        
        
         

        
    




/<code>

v-bind綁定class對象語法

當標籤的class是變量時，可以用v-bind指令動態的改變class

<code>


    
    
    <title>Document/<title>


    
    

          
        
點擊按鈕的時候，我的背景色會發生變化

        <button>點擊按鈕切換顏色/<button>
    





/<code>

v-bind綁定class數組語法

<code>


    
    
    <title>Document/<title>


    

         

        

            動態綁定class數組
        

    




/<code>

v-bind綁定class數組語法和綁定對象語法不一樣，綁定對象語法是根據true和false動態的綁定class

v-bind綁定style對象語法

語法 :style="{css屬性名:data中的數據}"

<code>


    
    
    <title>Document/<title>


    

        
        
中國

    




/<code>

v-bind綁定style數組語法

<code>


    
    
    <title>Document/<title>


    

        
        
中國

    




/<code>

總結：v-bind主要用於動態的綁定標籤的屬性，只要標籤的屬性是一個變量，可以使用v-bind指令綁定。

閱讀更多 就叫春哥 的文章

關鍵字: 虛擬機 新手入門 HTML