v-bind绑定

  一、标签属性动态绑定

        方式一： v-bind:属性名="data声明的变量名"

        方式二：（简写） 将v-bind省略，直接 :属性名="data声明的变量"

        v-bind.属性名[.修饰符]="变量名、计算属性。。

        对应还提供了修饰符：

           1 .camel: 将横杠形式属性名转换成驼峰形式的属性名

                如：v-bind:view-box="viewBoxData" 显示为view-box="**"

                使用v-bind:view-box.camel="viewBoxData"> 显示为viewBox="**"

           2 .attr 强制绑定dom原生属性

                v-bind:age.attr="123" > 查看html代码：标签上看到age=123

           3 .prop 强制绑定子组件的prop属性

                v-bind:age.prop="123" 查看html代码，标签上看不到age属性

二、动态指定属性名

eg:

html代码：

       

动态指定属性名

        按钮

        动态绑定属性名

script里面的代码如下：

data(){
return{
    igurl:'https://cn.vuejs.org/images/logo.png',
    age:19,
    viewboxdata:'0 0 128 128',
    key:'disabled',
    value: true,
    id: 999,
    to: 'http://www.baidu.com'
}
}

data 里面key的值为disabled，value为true。显示效果如下图

通过修改key的值，按钮可以点击了

三、同时绑定多个属性

以对象的方式绑定， key就是标签的属性名，value就是动态值

如果标签上有显示写明相同名称的属性，按编写属性的顺序，则后面的会覆盖前面的

 下面的展示的是 id="8888"

        v-bind简写动态绑定多个属性

 下面的展示的是 id="999"

          v-bind简写动态绑定多个属性

eg:

        v-bind简写动态绑定多个属性

       

        v-bind 动态绑定多个属性

    
    
    


    
    

        
        
v-bind标签属性动态绑定

        
        
        
简写方式`:属性名="**"`
        
        
        
        
.attr 指明绑定到原生属性
        

        
        
.prop 指明绑定到子组件属性
        
        
        
没有指定修饰符
        
        
attr修饰符
        
        
prop修饰
        
        
.camel将横杠转为驼峰形式
        
        
.camel修饰，不是必要属性不会转为驼峰
        
        
        
        
        
动态指定属性名
        按钮
        动态绑定属性名

        
        v-bind简写动态绑定多个属性
        

        v-bind 动态绑定多个属性