概要:v-bind指令用于设置HTML的属性,即用于绑定数据和元素属性,比如class属性,style属性,value属性,href(:v-bind:href缩写为:href,<a :href="{{url}}">abc</a>)属性等等。只要是属性,就可以用v-bind指令进行绑定。

v-bind指令用于设置HTML的属性,即用于绑定数据和元素属性,例如:v-bind:href缩写为:href,<a :href="{{url}}">aa</a>。比方class属性,style属性,value属性,href属性等等。只要是属性,就可以用v-bind指令进行绑定。
注意:Mustache (双大括号写法)不能在 HTML 属性中使用,应使用 v-bind 指令。

1、:v-bind动态绑定指令,默认情况下标签自带属性的值是固定的,在为了能够动态的给这些属性添加值,可以使用v-bind:你要动态变化的值="表达式"。
2、:v-bind用于绑定属性和数据 ,其缩写为“ : ”,v-bind:属性名=‘’ 简写为 :属性名=‘’,完整语法为<a v-bind:href="url"></a>缩写为<a :href="url"></a>,即v-bind:href  === :href。
3、:v-model用在表单控件上的,用于实现双向数据绑定,所以如果你用在除了表单控件以外的标签是没有任何效果的。

(1)绑定一个属性
        <img :src="imgUrl" /> 
        <img class="box" src="{{url}}" >
(2)绑定一个有属性的对象
        <div v-bind="{ id:someProp, 'other-attr': otherProp }"></div> 
(3) 内联字符串拼接
       <img :src="'../images/' + fileName" /> 
(4)class 绑定
       可以动态地切换class,并且可以与普通的class特性共存:
              <div class="content" :class="{ red: isRed }"></div> 
       可以把数组传给:class,以应用一个class列表:
              <div :class="[ classA, classB ]"></div> <div :class="[ classA, { classB : isB, classC: isC }]"></div> 
       并且可以直接绑定数据里的一个对象:
              <a v-bind:class="{ active : isActive }">click me</a>
       还可以使用三目运算符,根据条件切换列表中的class:
              <div :class="[ isAlready ? classA : "",  classB ]"></div>
       对于多个class,可以合并为:
              <div v-bind:class="[classA, { classB: isB, classC: isC }]">
(5)内联样式style绑定
       内联样式的对象语法,:style实际上是一个JavaScript对象,CSS属性名必须使用驼峰命名法;(使用短横分隔命名法容易报错)
              <div id="box" :style="{color:activeColor, font-size:size}"></div>
       也可以直接绑定到一个样式对象:
              <div id="content" :style="styleObject">fine</div>
              <div :style="{ fontSize: size + 'px' }"></div>
       可采用数组语法,将多个样式应用到同一个元素上:
               <div :style="[ styleA, styleB ]"></div> 
(6)通过prop绑定(prop必须在my-component中声明)
        <my-component :prop="time"></my-component> 
(7)通过 $props 将父组件的props 一起传递给子组件
        <child-component v-bind="$props"></child-component>
(8)xlink 
       <svg><a :xlink:special="fine"></a></svg>

作者:Coding_QAQ
链接:移动云开发者社区
来源:移动云开发者社区

Logo

前往低代码交流专区

更多推荐