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