Vue.js 样式绑定:Class 与 Style 绑定

作者: Arvin Chen 分类: vue 来源: Break易站(www.breakyizhan.com)

Vue.js 样式绑定主要有:

  • Vue.js Class属性样式绑定
  • Vue.js Style内联样式绑定

因为Class和Style它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可。不过字符串的计算容易出错,因此,VUE除了处理字符串之外,还增加了对象和数组的处理。

Class属性样式绑定

除了可以使用原生的 class 类属性之外,vue 提供了 v-bind:class 来使用类样式

比如:改变 div 的背景色,给 div 绑定到 class: active,而Class属性样式绑定又有三种:字符串,对象和数组。

Class属性样式绑定字符串

对于Class属性样式绑定字符串的,可以用下面的语法,可以看到v-bind通过表达式计算出字符串结果:

     提示:可以修改代码后运行

Class属性样式绑定对象

那么,上面的例子用Class属性绑定对象的代码应该怎么写呢?我们可以看到,两者达到的效果是一样的:

     提示:可以修改代码后运行

此外,我们也可以在这里绑定返回对象的计算属性。这是一个常用且强大的模式:

     提示:可以修改代码后运行

Class属性样式绑定数组

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

     提示:可以修改代码后运行

Class属性样式绑定字符串之三元表达式

使用三元表达式来切换列表中的 class :

     提示:可以修改代码后运行

Style内联样式绑定

Style内联样式绑定和Class列表都是操作属性的,也是有三种样式绑定:字符串,对象和数组(2.3:多重值)。

Style内联样式绑定字符串

     提示:可以修改代码后运行

Style内联样式绑定对象

     提示:可以修改代码后运行

Style内联样式绑定数组

     提示:可以修改代码后运行

Style内联样式绑定多重值,多重值的绑定是从2.3开始之后的,提供一个包含多个值的数组,常用于提供多个带前缀的值,例如:

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

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

  •   本文标题:Vue.js 样式绑定:Class 与 Style 绑定 - Break易站
    转载请保留页面地址:https://www.breakyizhan.com/vue/6686.html
    扫描二维码添加微信 
  • ,领取淘宝优惠券,淘宝购物更优惠。现在添加微信,还可以领取机械键盘优惠券!添加微信后,分享淘宝选中的机械键盘给淘宝机器人即可领取!
    支持我们,就用微信淘宝!

    发表笔记

    电子邮件地址不会被公开。 必填项已用*标注

    更多阅读