Vue中v-bind的使用
概要:v-bind指令用于设置HTML的属性,即用于绑定数据和元素属性,比如class属性,style属性,value属性,href(:v-bind:href缩写为:href,<a :href="{{url}}">abc</a>)属性等等。只要是属性,就可以用v-bind指令进行绑定。v-bind指令用于设置HTML的属性,即用于绑定数据和元素属性,例如:v-bind:hr
概要: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>
更多推荐
所有评论(0)