4、class与style


title: 4、class与style
date: 2017-07-29 22:55:13
tags: vue笔记(妙味)


数据绑定一个常见需求是,操作元素的class列表,和它的style时,因为他们都是属性所以可以用 v-bind 处理他们

但是字符串拼接麻烦又易错。因此在v-bind用于classstyle时,Vue专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组。

绑定class

这里class是否为active取决于isActive是否为真


<div v-bind:class="{ active: isActive }"></div>

可以在对象中传入更多属性用来动态切换多个class,此外,v-bind:class指令可以与普通的class属性共存


<div class="static" v-bind:class="{ active: isActive, text-danger: hasError }">
</div>

通过一个对象获取class名


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

通过一个数组获取class名


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

上面三种写法在Vue中的数据处理:

var app = new Vue({
    ...
    data: {
        isActive: true, 
        hasError: false,  
        activeClass: 'active',
        errorClass: 'text-danger',
        classObject: {    
            active: true,
            text-danger: true
        }
    },
    computed:{
        classObject:function(){
            return {
                active:this.isActive && !this.error,
            }
        }
    }
})

需要注意的是,class中如果包括用-连接的类名。一定要写为字符串的形式。

绑定style

v-bind:style的语法十分直观,看着非常像css,但其实是一个js对象。css属性名可以用驼峰式,或者配合引号的短横分隔命名。另外对于css3的前缀,vue会自动添加。

最直接的方式


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

直接绑定一个对象通常更好,也可以将多个对象用在一个元素上


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

在Vue中的数据处理

var app = new Vue({
    ...
    data:{
        activeColor:'red',
        fontSize:30,
        styleObject:{
            color:'red',
            fontSize:'13px'
        }
    }
})
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值