说说在 Vue.js 中如何绑定样式(class 或 style)

在数据绑定中,最常见就是动态绑定元素的 class 或内联样式 style 咯,它们也是 HTML 的属性,所以可以使用 v-bind 指令 。

1 绑定 class

1.1 对象语法

使用 v-bind:class 属性,实现动态切换 class。

html:

<div id="app">
    <div :class="{'hidden':isHidden}">看得见我嘛</div>
</div>

js:

<script>
    var app = new Vue({
        el: '#app',
        data: {
            isHidden:true
        }
    });
</script>

输出结果:

<div class="hidden">看得见我嘛</div>

注意: :classv-bind:class 的简写形式。

示例中的类名 hidden 依赖于数据 isHidden ,当 isHidden 为 true 时, div 就会拥有类名 hidden,为 false 时就没有该类名 。

我们也可以一次传入多个属性,而且 :class 可以和常规的 class 同时使用。

html:

<div id="app">
    <div class="strong" :class="{'hidden':isHidden,'bigger':isBigger}">看得见我嘛</div>
</div>

js:

<script>
    var app = new Vue({
        el: '#app',
        data: {
            isHidden: false,
            isBigger: true
        }
    });
</script>

输出结果:

<div class="strong bigger">看得见我嘛</div>

:class 中的某个属性值为 true 时,就会加载对应的类名。

:class 的表达式过长或逻辑复杂时,我们可以通过计算属性来绑定。

html:

<div id="app2">
    <div :class="customClasses"></div>
</div>

js:

var app2 = new Vue({
    el: '#app2',
    data: {
        isHidden: false,
        isBigger: true
    },
    computed: {
        customClasses: function () {
            return {
                display: !this.isHidden,
                'bigger-text': !this.isHidden && this.isBigger
            }
        }
    }
});

输出结果:

<div class="display bigger-text"></div>

注意:如果样式名称带有 -,那么必须加上单引号(示例中的 bigger-text)才能被正确识别。

1.2 数组语法

也可以使用数组语法,给 :class 绑定一个 class 数组。

html:

<div id="app">
    <div :class="[strongerClass,biggerClass]">号外!号外</div>
</div>

js:

<script>
    var app = new Vue({
        el: '#app',
        data: {
            strongerClass:'strong',
            biggerClass:'bigger'
        }
    });
</script>

输出结果:

<div class="strong bigger">号外!号外</div>

数组中的元素也可以使用三元表达式来计算

html:

<div id="app2">
    <div :class="[isStrong?strongerClass:'']">号外!号外</div>
</div>

js:

var app2 = new Vue({
    el: '#app2',
    data: {
        isStrong:true,
        strongerClass:'strong'
    }
});

输出结果:

<div class="strong">号外!号外</div>

当需要设置的 class 很多时,我们可以在数组语法的基础上使用对象语法,从而简化表达式,让代码变得更易维护。

html:

<div id="app3">
    <div :class="[{'strong':isStrong}]">号外!号外</div>
</div>

js:

var app3 = new Vue({
    el: '#app3',
    data: {
        isStrong:true
    }
});

输出结果:

<div class="strong">号外!号外</div>

也可以在 computed 或 methods 中返回需要设定的数组。

html:

<div id="app4">
    <div :class="btnClass">号外!号外</div>
</div>

js:

var app4 = new Vue({
    el: '#app4',
    data: {
        size: 'small',
        isGreen: true
    },
    computed: {
        btnClass: function () {
            return [
                'btn',
                {
                    ['btn-' + this.size]: this.size !== '',
                    ['btn-green']: this.isGreen
                }
            ];
        }
    }
});

输出结果:

<div class="btn btn-small btn-green">号外!号外</div>

注意: 上述示例使用了 ECMAScript 6 语法,所以在 webStorm 中需要进行设置(Setting → JavaScript → 选择 ECMAScript 6 )否则会出现红色波浪线哦:


在业务中会经常会利用计算属性为元素动态设置类名,尤其是在编写可复用的组件时。所以在开发过程中,如果表达式较长或者逻辑较为复杂,建议优先使用计算属性哦O(∩_∩)O~

1.3 应用于组件

如果直接在自定义组件中使用 class:class,那么样式规则就会直接应在这个组件的根元素上。

html:

<div id="app">
    <text-component :class="{'isStrong':isStrong}"></text-component>
</div>

js:

<script>
    Vue.component('text-component', {
        template: '<p class="content">不懂基因测序的学霸不是好的人工智能公司 CEO</p>'
    });
    var app = new Vue({
        el: '#app',
        data: {
            isStrong: true
        }
    });
</script>

css:

<style type="text/css">
    .isStrong{font-weight: bold}
</style>

渲染后代码:

<p class="content isStrong">不懂基因测序的学霸不是好的人工智能公司 CEO</p>

效果


这种方式仅适用于把样式应用于自定义组件的根元素。如果需要给自定义组件中的子元素设置样式,我们可以使用组件的 props 来实现。

2 绑定内联样式

也可以使用 v-bind:style:style 直接给 HTML 元素绑定样式,它也有对应的对象语法与数组语法。

html:

<div id="app">
    <div :style="border">马斯克太空网计划扩大 FCC已允许1.2万颗卫星入轨</div>
</div>

js:

<script>
    var app = new Vue({
        el: '#app',
        data: {
            border:{
                border:'1px solid #00F',
                textShadow:'0 0 .3em gray'
            }
        }
    });
</script>

因为 JS 属性不支持短横分隔命名,所以我们这里使用 CSS 也支持的驼峰命名法。

渲染后代码:

<div style="border: 1px solid rgb(0, 0, 255); text-shadow: gray 0px 0px 0.3em;">马斯克太空网计划扩大 FCC已允许1.2万颗卫星入轨</div>

效果

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,312评论 5 473
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,578评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,337评论 0 333
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,134评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,161评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,303评论 1 280
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,761评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,421评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,609评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,450评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,504评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,194评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,760评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,836评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,066评论 1 257
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,612评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,178评论 2 341

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,386评论 1 45
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,044评论 0 29
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,051评论 0 3
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 3,815评论 0 0
  • 二姐顶着酷热到宁夏旅游,白天将近40°的气温晒得眼前一片明晃晃。烈日地下挑战各种游戏,她说一不小心摸一下扶手都有被...
    mimi播报阅读 450评论 2 5