v-bind指令

一、v-bind指令1.动态绑定特性1.绑定一个属性2.动态特性名 (2.6.0+)3.v-bind缩写4.内联字符串拼接5.无参数 2.绑定class1.对象语法2.数组语法 3.绑定style1.使用对象语法2.使用数组语法 4.修饰符1..camel2..prop3..sync

一、v-bind指令

1.动态绑定特性

1.绑定一个属性

<div id="app"> <div v-bind:set='type'></div>//type为我们设置的参数attr </div> <script> const vm = new Vue({ el: '#app', data: { type: 'attr' } }) </script>

2.动态特性名 (2.6.0+)

<div id="app"> <div v-bind:[set]='type'></div>//特性名和特性值都通过参数设置 </div> <script> const vm = new Vue({ el: '#app', data: { set: 'attrName', type: 'attr' } }) </script>

3.v-bind缩写

如果某些情况下需要绑定多个特性，会导致代码冗余

<div id="app"> <div v-bind:[set]='type' v-bind:[make]='spec'></div> </div>

于是：

<div id="app"> <div v-bind:[set]='type' :makeName='spec'></div> </div> <script> const vm = new Vue({ el: '#app', data: { set: 'attrName', type: 'attr', spec: 'special' } }) </script>

4.内联字符串拼接

<div id="app"> <img :src="'/path/to/images/' + fileName"> </div> <script> const vm = new Vue({ el: '#app', data: { fileName: '1.png' } }) </script>

5.无参数

没有参数时，可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。

<div id="app"> <img v-bind="{name: 'jimo',age: '18'}"> </div>

2.绑定class

1.对象语法

<div id="app"> <div v-bind:class="{ red: isRed }"></div>//判断isRed的值 </div> <script> const vm = new Vue({ el: '#app', data: { isRed: true } }) </script>

2.数组语法

我们可以把一个数组传给 v-bind:class，以应用一个 class 列表 <div id="app"> <div v-bind:class="['classA', 'classB']"></div> <div v-bind:class="[classA, classB]"></div> </div> <script> const vm = new Vue({ el: '#app', data: { classA: 'red', classB: 'green' } }) </script>

在数组语法总可以使用三元表达式来切换class <div id="app"> <div v-bind:class="[isActive ? activeClass : '', errorClass]"></div> </div> <script> const vm = new Vue({ el: '#app', data: { isActive: true, activeClass: 'red', errorClass: 'green' } }) </script>

在数组语法中可以使用对象语法(可以与普通 class 共存) <div id="app"> <div v-bind:class="[classA, { classB: isB, classC: isC }]"></div> <div v-bind:class="classA" class="red"></div> </div> <script> const vm = new Vue({ el: '#app', data: { classA: 'pick', classB: 'red', classC: 'green', isB: !false, isC: '' } }) </script>

3.绑定style

1.使用对象语法

看着比较像CSS，但其实是一个JavaScript对象 CSS属性名可以用驼峰式(camelCase)或者短横线分隔(kebab-case)来命名 但是使用短横线分隔时，要用引号括起来

<div id="app"> <div v-bind:style="{ fontSize: size + 'px' }">字体</div> </div> <script> const vm = new Vue({ el: '#app', data: { size: 19 } }) </script>

也可以直接绑定一个样式对象，这样模板会更清晰 <div id="app"> <div v-bind:style="styleObj">字体</div> </div> <script> const vm = new Vue({ el: '#app', data: { styleObj: { color: 'red', fontSize: '18px' } } }) </script>

2.使用数组语法

数组语法可以将多个样式对象应用到同一个元素

<div id="app"> <div v-bind:style="[styleObjA,styleObjB]">字体</div> </div> <script> const vm = new Vue({ el: '#app', data: { styleObjA: { color: 'red', fontSize: '18px' }, styleObjB: { border: '1px solid red' } } }) </script>

自动添加前缀 绑定style时，使用需要添加浏览器引擎前缀的CSS属性时，如 transform，Vue.js会自动侦测并添加相应的前缀。

多重值 从 2.3.0 起你可以为 style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值 例：

<div id="app"> <div :style="{display:['-webkit-box','-ms-flexbox','flex']}"></div> </div>

这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。

4.修饰符

修饰符 (modifier) 是以英文句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

1…camel

<div id="app"> <svg :viewBox='viewBox'></svg> </div> <script> const vm = new Vue({ el: '#app', data: { viewBox: '0 0 100 100' } }) </script>

<div id="app"> <svg :view-box.camel='viewBox'></svg> </div>

2…prop

被用于绑定 DOM 属性 (property)

const demo = document.getElementById('app'); for(let key in demo){ console.log(key);//这些就是属性 }

<div v-bind:text-content.prop="text"></div>

3…sync

讲解组件时再说