精选文章 Vue指令篇_v-bind

Vue指令篇_v-bind

作者:桃花扇J 时间: 2020-07-27 09:27:46
桃花扇J 2020-07-27 09:27:46

目录

1.基本用法

2.class和style的绑定

1)绑定class

2)绑定style

3.修饰符

1) .camel

2) .prop


1.基本用法

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

Vue指令篇_v-bind1 Vue指令篇_v-bind2 Vue指令篇_v-bind3
const vm = new Vue({
    el:"#app",
    data:{
        imageSrc:"./pic1.jpg",
        fileName:"pic1.jpg",
        key: "id",
        value: "btn"
    }
})

【结果】

Vue指令篇_v-bind4

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

【结果】

Vue指令篇_v-bind5

2.class和style的绑定

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

1)绑定class

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

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

【结果】

Vue指令篇_v-bind6

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

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

【结果】

Vue指令篇_v-bind7

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

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

【结果】

Vue指令篇_v-bind8

数组中使用对象语法

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

【结果】

Vue指令篇_v-bind9

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

2)绑定style

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

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

【结果】

Vue指令篇_v-bind10

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

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

【结果】

Vue指令篇_v-bind11

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

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

【结果】

Vue指令篇_v-bind12

【注】

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

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

Vue指令篇_v-bind13

3.修饰符

1) .camel

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

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

【结果】

Vue指令篇_v-bind14

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

Vue指令篇_v-bind15

2) .prop

用于绑定DOM属性(property)

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

【结果】

Vue指令篇_v-bind16

勿删,copyright占位
分享文章到微博
分享文章到朋友圈

上一篇:nodejs项目windows下开机自启动

下一篇:IP-guard与Ping32文档操作控制功能的对比

您可能感兴趣

  • 包学会之浅入浅出Vue.js:结业篇

    在第一篇《包学会之浅入浅出Vue.js:开学篇》和上一篇《包学会之浅入浅出Vue.js:升学篇》的学习中,我们首先了解了Vue环境的搭建以及两个重要思想——路由和组件的学习,通过组件库中的按钮组件和导航组件,相信大家也开始了解相应的知识点,接下来我们会详细分析下如何完成由多个组件组成一个复用组件的开发流程。 下面先看看我们的需求 列表组件quiList.vue 本节我们主要要完成这样一个列表...

  • Vue.js——60分钟组件快速入门(下篇)

    概述 上一篇我们重点介绍了组件的创建、注册和使用,熟练这几个步骤将有助于深入组件的开发。另外,在子组件中定义props,可以让父组件的数据传递下来,这就好比子组件告诉父组件:“嘿,老哥,我开通了一个驿站,你把东西放到驿站我就可以拿到了。” 今天我们将着重介绍slot和父子组件之间的访问和通信,slot是一个非常有用的东西,它相当于一个内容插槽,它是我们重用组件的基础。Vue的事件系统独立于原...

华为云40多款云服务产品0元试用活动

免费套餐,马上领取!
CSDN

CSDN

中国开发者社区CSDN (Chinese Software Developer Network) 创立于1999年,致力为中国开发者提供知识传播、在线学习、职业发展等全生命周期服务。