Vue Class 与 Style 绑定

简介

HTML 元素的 class 绑定 和内联样式绑定是数据绑定的一个常见需求。

由于字符串拼接麻烦且易错。因此,在用 v-bind 绑定 class 和 style 时,Vue.js 做了专门的增强。表达式的结果的类型除了字符串之外,还可以是对象或数组。

绑定 Class

对象语法

可以传给 v-bind:class 一个对象,来动态地切换 class。

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

上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive 的布尔值。

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

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

当 data 为:

1.  data: {    
2.    isActive: true,    
3.    hasError: false    
4.  }    

时,渲染结果为:

<div class="static active"></div> 

给 Class 绑定一个返回值为对象的计算属性,是一种很常用且强大的方式。

<div v-bind:class="classObject"></div> 
1.  data: {    
2.    isActive: true,    
3.    error: null    
4.  },    
5.  computed: {    
6.    classObject: function () {    
7.      return {    
8.        active: this.isActive && !this.error,    
9.        'text-danger': this.error && this.error.type === 'fatal'    
10.      }    
11.    }    
12.  }   

数组语法

可以把一个数组传给 v-bind:class,以应用一个 class 列表。

<div v-bind:class="[activeClass, errorClass]"></div> 
1.  data: {    
2.    activeClass: 'active',    
3.    errorClass: 'text-danger'    
4.  }    

渲染为:

<div class="active text-danger"></div> 

如果你也想根据条件切换列表中的 class,可以用三元表达式:

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

这样写将始终添加 errorClass,但是只有在 isActive 为 true 时,才添加 activeClass。

在数组语法中也可以使用对象语法:

<div v-bind:class="[{ active: isActive }, errorClass]"></div> 

用在组件上

当在一个自定义组件上使用 class 属性时,这些类将被添加到该组件的根元素上。这个元素上已经存在的类不会被覆盖。

例如,如果你声明了这个组件:

1.  Vue.component('my-component', {    
2.    template: '<p class="foo bar">Hi</p>'    
3.  })    
<my-component class="baz boo"></my-component> 

HTML 将被渲染为:

<p class="foo bar baz boo">Hi</p> 

绑定 Style

绑定 Style 指的是绑定元素的内联样式。

对象语法

v-bind:style 的对象语法看着非常像 CSS,但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case,记得用单引号括起来) 来命名:

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div> 
1.  data: {    
2.    activeColor: 'red',    
3.    fontSize: 30   
4.  }

直接绑定到一个样式对象通常更好,这会让模板更清晰:

<div v-bind:style="styleObject"></div> 
1.  data: {    
2.    styleObject: {   
3.      color: 'red',    
4.      fontSize: '13px'    
5.    }    
6.  }

同样的,对象语法常常结合返回对象的计算属性来使用。

数组语法

v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上:

<div v-bind:style="[baseStyles, overridingStyles]"></div> 

自动添加前缀

当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时,如 transform,Vue.js 会自动侦测并添加相应的前缀。

多重值

从 2.3.0 起你可以为 style 绑定中的属性提供一个包含多个值的数组,常用于提供多个带前缀的值,例如:

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

这样写只会渲染数组中最后一个被浏览器支持的值。在本例中,如果浏览器支持不带浏览器前缀的 flexbox,那么就只会渲染 display: flex。

原文链接:segmentfault.com

上一篇:CSS 标签选择器
下一篇:Jenkins打造强大的前端自动化工作流

相关推荐

  • 请/ removeClass jQuery的动画

    ROMANIA_engineerJohannes提出了一个问题:animating addClass/removeClass with jQuery,或许与您遇到的问题类似。

    3 年前
  • 详解ES6中的class——基本概念

    用构造函数,生成对象实例: 使用构造函数,并且new 构造函数(), 后台会隐式执行new Object() 创建对象 将构造函数的作用域给新对象,(即new Object() 创建出的对象),函...

    1 年前
  • 解读 vue-class-component 源码实现原理

    导读 使用过一段时间 class 来定义组件,要用 vue-property-decorator 提供定义好的装饰器,辅助完成所需功能,对这个过程好奇,就研究了源码。

    5 个月前
  • 解读 React 的 pooledClass.js

    前言 在学习 React 事件系统的时候,在事件分发的 dispatch方法发现了调用了一个 pooledClass 方法,一时半会没看明白这个方法的用意。 我们先看一下是怎么用的: // step1...

    2 年前
  • 脚本:Class.method vs. Class.prototype.method

    Rob Wpostrational提出了一个问题:JavaScript: Class.method vs. Class.prototype.method,或许与您遇到的问题类似。

    3 年前
  • 聊一聊ES6 CLASS 实现原理

    Class是ES6中新加入的继承机制,实际是Javascript关于原型继承机制的语法糖,本质上是对原型继承的封装。本文将会讨论: 1、ES6 class的实现细 2、相关Object API盘点 3...

    2 年前
  • 精读《Function VS Class 组件》

    1. 引言 为什么要了解 Function 写法的组件呢?因为它正在变得越来越重要。 那么 React 中 Function Component 与 Class Component 有何不同? how...

    2 年前
  • 白话速述 styled-components 4.x 的使用

    废话不多话,来上车! 安装: npm install --save styled-components (或者 yarn add styled-components)简述使用: 1、 创建全局...

    2 年前
  • 用React实现一个掘金Style的文章编辑器

    前言 我是一个掘金重度用户,不仅经常在掘金上挖掘含金量高的文章,偶尔还在掘金上创作技术文章。相信读者们也对掘金非常满意,尤其是它的文章编辑器,不仅支持Markdown编辑,而且还支持代码高亮、分屏预览...

    1 年前
  • 用EC5/EC6自定义class的区别及用法 -- Phaser3网页游戏框架

    EC6 自定义class class Brain extends Phaser.GameObjects.Sprite { constructor (scene, x, y) { ...

    2 年前

官方社区

扫码加入 JavaScript 社区