Vue指令篇_v-bind

目录

1.基本用法

2.class和style的绑定

1）绑定class

2）绑定style

3.修饰符

1) .camel

2) .prop

---

1.基本用法

作用：动态地绑定一个或多个特性，也可以绑定动态特姓名，用法如下例

<div id="app">
    <!-- 绑定一个属性, : 后的为传递的参数 -->
    <img v-bind:src="imageSrc">
    <!-- 动态特性名 (2.6.0+) -->
    <button v-bind:[key]="value">点击</button>
    <!-- 缩写 -->
    <img :src="imageSrc">
    <button :[key]="value">点击</button>
    <!-- 内联字符串拼接 -->
    <img :src="'./'+fileName">
</div

const vm = new Vue({
    el:"#app",
    data:{
        imageSrc:"./pic1.jpg",
        fileName:"pic1.jpg",
        key: "id",
        value: "btn"
    }
})

【结果】

【注】没有参数时，可以绑定一个包含键值对的对象

<div v-bind="{class:'box',[key]:'my-box'}"></div>

【结果】

2.class和style的绑定

由于字符串拼接麻烦且易错，所以在绑定class或style特性时，Vue做了增强，表达式的类型除了字符串之外，还可以是数组或对象。

1）绑定class

对象语法：可以判断某个类名是否存在于class属性中，如下例，red是否存在于class中，取决于isRed的真假

<div v-bind:class="{red: isRed, green:isGreen}"></div>

const vm = new Vue({
    el: "#app",
    data: {
        isRed: true,
        isGreen:false
    }
})

【结果】

数组语法：我们可以把一个数组传给v-bind：class，以应用一个class列表

<div v-bind:class="classList"></div>

const vm = new Vue({
    el: "#app",
    data: {
        classList:["box", "reset"],
    }
})

【结果】

三元表达式：在数组语法中可以使用三元表达式来切换class

<div v-bind:class="[isActive ? activeClass : '',errorClass]"></div>

const vm = new Vue({
    el: "#app",
    data: {
        isActive: true,
        activeClass: 'active',
        errorClass: 'error'
    }
})

【结果】

数组中使用对象语法：

<div v-bind:class="[classA,{[classB]:isB},{[classC]:isC}]"></div>

const vm = new Vue({
    el: "#app",
    data: {
        classA: 'A',
        classB: 'B',
        classC: 'C',
        isB: false,
        isC: true
    }
})

【结果】

【注】v-bind：class可以和普通class共存

2）绑定style

对象语法：看着比较像css，实际上是一个JavaScript对象。CSS属性名可以用驼峰式（camelCase）或者短横线分隔（kebab-case）来命名，但是使用短横线分隔时，要用引号括起来

<div v-bind:style="{fontSize:size +'px'}"></div>

const vm = new Vue({
    el: "#app",
    data: {
        size: 300
    }
})

【结果】

也可以直接绑定一个样式对象，这样模板会更清晰：

<div v-bind:style="styleObject"></div>

const vm = new Vue({
    el: "#app",
    data: {
        styleObject: {
            fontSize: '300px',
            color: 'red'
        }
    }
})

【结果】

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

<div v-bind:style="[styleObjectA,styleObjectB]"></div>

const vm = new Vue({
    el: "#app",
    data: {
        styleObjectA: {
            fontSize: '300px'
        },
        styleObjectB: {
            color: 'red'
        }
    }
})

【结果】

【注】

• 自动添加前缀：绑定style时，使用需要添加浏览器引擎前缀的css属性时，如transform，Vue.js会自动侦测并添加相应的前缀
• 多重值：从2.3.0起，可以为style绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值

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

【结果】谷歌浏览器打开后元素如下，该种写法只会渲染数组中最后一个被浏览器支持的值。

3.修饰符

1) .camel

由于绑定特性时，会将大写字母转换为小写字母，如下例

<svg :viewBox='viewBox'></svg>

const vm = new Vue({
    el: "#app",
    data: {
        viewBox:'0 0 100 100'
    }
})

【结果】

因此，Vue提供了v-bind修饰符camel，该修饰符允许在使用DOM模板时将v-bind属性名称驼峰化，如下

<svg :view-box.camel='viewBox'></svg>

2) .prop

用于绑定DOM属性（property）

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

const vm = new Vue({
    el: "#app",
    data: {
        text:'智者不如爱河'
    }
})

【结果】