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="**"

v-bind绑定_第1张图片

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

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

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

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

v-bind绑定_第2张图片

二、动态指定属性名

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。显示效果如下图

v-bind绑定_第3张图片

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

v-bind绑定_第4张图片

三、同时绑定多个属性

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

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

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

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

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

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

eg:

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

v-bind绑定_第5张图片

       

        v-bind 动态绑定多个属性




    
    
    v-bind属性动态绑定


    
    

v-bind标签属性动态绑定

简写方式`:属性名="**"`

.attr 指明绑定到原生属性

.prop 指明绑定到子组件属性

没有指定修饰符

attr修饰符

prop修饰

.camel将横杠转为驼峰形式

.camel修饰,不是必要属性不会转为驼峰

动态指定属性名

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

你可能感兴趣的:(vue,前端,java,javascript)