前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue class与style 绑定详解——小白速会

vue class与style 绑定详解——小白速会

作者头像
柴小智
发布2018-04-10 17:08:29
1.2K0
发布2018-04-10 17:08:29
举报
文章被收录于专栏:菜鸟计划

一、绑定class的几种方式

1.对象语法

直接看例子:

代码语言:javascript
复制
    <div id="app3">
        <div :class="{'success':isSuccess,'fail':isFail}">对象绑定class</div>  //简单的处理直接使用数据来判断
        <div :class="classes">计算属性绑定class</div>  //当class的表达式过长或逻辑复杂时,使用计算属性
    </div>
代码语言:javascript
复制
var app3 = new Vue({
    el: '#app3',
    data: {
        isSuccess: true,
        isFail: false,
        error: false
    },
    computed: {
        classes: function(){
            return {
                success: this.isSuccess && !this.error,
                fail: this.isFail || !this.error
            }
        }
    }
});

 2.数组语法

直接看例子:

代码语言:javascript
复制
    <div id="app4">
        <div :class="[successCls,failCls]">绑定多个class属性</div>  //用于来绑定多个class属性
        <div :class="[{'success':isSuccess},failCls]">绑定多个class属性一</div>  //动态的判断添加那些class属性,是最常用的
    </div>
代码语言:javascript
复制
var app4 = new Vue({
    el: '#app4',
    data: {
        successCls: 'success',
        failCls: 'fail',
        isSuccess: true,
        isFail: false
    }
});
代码语言:javascript
复制
<div id= ”app”>
  <button :class= ”classes”></button>
</div>
var app = new Vue({
    el: '#app',
    data:{
        size : 'large',
        disabled : true
    },
    computed: {
        classes: function(){
            return [
                'btn',
                {
                    ['btn-'+this.size]: this.size,
                    ["btn-disabled"]: this.disabled
                }
            ]
        }
    }
});

使用计算属性给元素动态设置类名,在业务中经常用到,尤其是在写复用的组件时,所以在开发过程中,如果表达式较长或逻辑复杂,应该尽可能地优先使用计算属性。

3.在组件上使用

直接看例子:

代码语言:javascript
复制
    <div id="app5">
        <my-component :class="{'success': isSuccess}"></my-component>
    </div>
代码语言:javascript
复制
Vue.component('my-component',{
   template: '<div class="fail">绑定组件class属性</div>'
});
var app5 = new Vue({
   el: '#app5',
   data: {
       isSuccess: true
   }
});

这种用法仅适用于自定义组件的最外层是一个根元素,否则会无效,当不满足这种条件或需要给具体的子元素设置类名时,应当使用组件的props 来传递。

 二、绑定内联样式

直接看例子:

代码语言:javascript
复制
    <div id="app6">
        <div :style="{'color':color,'fontSize':fontSize+'px'}">文本</div>
    </div>
代码语言:javascript
复制
var app6 = new Vue({
   el: '#app6',
   data: {
       color: 'red',
       fontSize: 14
    }
});

大多数情况下, 直接写一长串的样式不便于阅读和维护,所以一般写在data 或computed 里

代码语言:javascript
复制
    <div id="app6">
        <div :style="style">文本</div>
    </div>
代码语言:javascript
复制
var app6 = new Vue({
   el: '#app6',
   data: {
       style: {
           color: 'red',
           fontSize: 14
       }
    }
});
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-04-03 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档