将 v-bind 用于 class 和 style 时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。

绑定 HTML Class

对象语法

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

上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive 的 truthiness。(truthiness指if转换后为true的值)

此外,v-bind:class 指令也可以与普通的 class 属性共存。

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

    <div v-bind:class="classObject"></div>
    data: {
      isActive: true,
      error: null
    },
    computed: {
      classObject: function () {
        return {
          active: this.isActive && !this.error,
          "text-danger": this.error && this.error.type === "fatal"
        }
      }
    }

数组语法

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

    <div v-bind:class="[activeClass, errorClass]"></div>
    data: {
      activeClass: "active",
      errorClass: "text-danger"
    }

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

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

用在组件上

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

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

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

对于带数据绑定 class 也同样适用:

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

绑定内联样式

对象语法

CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case,记得用单引号括起来) 来命名:

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

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

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

数组语法

        //数组中的元素实际是一个对象
    <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>

Class 与 Style 绑定的更多相关文章

  1. 关于vue.js中class与style绑定的学习

    练习代码: html: <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  2. Vue#Class 与 Style 绑定

    绑定HTMLCLASS 在我没看这之前,我觉得要写绑定class ,应该像绑定数据一样这么写 class ={{class-a}} 看官方教程时,不推荐这么写,推荐这样 v-bind:class=&q ...

  3. Vue中class与style绑定

    gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson07 一 用对象的方法绑定class 很简单,举个栗子: <!D ...

  4. Vue.2.0.5-Class 与 Style 绑定

    Class 与 Style 绑定 数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是属性 ,我们可以用v-bind 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼 ...

  5. Knockout.Js官网学习(style绑定、attr绑定)

    Style绑定 style绑定是添加或删除一个或多个DOM元素上的style值.比如当数字变成负数时高亮显示,或者根据数字显示对应宽度的Bar.(注:如果你不是应用style值而是应用CSS clas ...

  6. Style绑定

    目的 style绑定可以添加或者移除DOM元素的样式值.这非常有用,例如,当值为负数时将颜色变为红色. (注:如果要修改CSS整个类,请使用css绑定) <div data-bind=" ...

  7. 前端MVC Vue2学习总结(三)——模板语法、过滤器、计算属性、观察者、Class 与 Style 绑定

    Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...

  8. 【Vue.js】vue基础: 3种Class和Style绑定语法

    凡是用到了v-bind,那就一定有变量的存在,下面是三种语法的展示: 1. 对象语法: v-bind:class="{active: isActive, 'text-danger': has ...

  9. Vue学习4:class与style绑定

    说明:有些部分我只是相当于做一个学习笔记,加强记忆之用.所以可能阅读性不是那么强.如果有参考我这类博客的人,那么请见谅. 代码如下: <!DOCTYPE html> <html la ...

随机推荐

  1. JAVA To C++ Converter Cracked ( 破解版 )

    JAVA To C++ Converter v17.10.2 Cracked by X-Cracker 简介 JAVA To C++是一款将JAVA代码或项目转换为 C++的工具 免费版本只每次只支持 ...

  2. LeetCode 531. Longly Pixel I (孤独的像素之一) $

    Given a picture consisting of black and white pixels, find the number of black lonely pixels. The pi ...

  3. LeetCode 280. Wiggle Sort (摆动排序)$

    Given an unsorted array nums, reorder it in-place such that nums[0] <= nums[1] >= nums[2] < ...

  4. .12-Vue源码之patch(2)

    快完事咯! 简单看了下patch函数,虽然不长,但是实际上很长很长,慢慢来吧, 首先来个总览: // line-5250 // oldVnode => 原生DOM节点 // vnode => ...

  5. 使用 LitJson 解析Json并读取数据

    开发中经常要获取各种数据,而现今比较常见的数据便是Json数据格式,网上也有很多解析Json数据的方法,但是 作为小白的我,对于那些个高大上的方法理解不够,这不找了许久发了这些一个 LitJson 库 ...

  6. 最近折腾老机器:还是 Xp 最好!

    闲来无事,折腾机器. -------------------------------------------------------------- 硬件: CPU:amd x2450 Memory:6 ...

  7. Windows 编程,程序编译使用的命令行工具。

    Windows 编程,程序编译使用的命令行工具. 1.cl.exe文件是Visual C\C++的编译器,它将程序源代码文件编译为obj文件. 2.rc.exe文件是资源编译器.工程项目中的.rc文件 ...

  8. C++获取Windows7 32位系统中所有进程名(类似于任务管理器中的进程)

    代码是网上查找资料,然后自己调试,修改之后可以运行. 系统:win7 32位,VS2008 ------------------------------------------------------ ...

  9. StringDup(理论AC)

    Problem Statement for StringDup Problem Statement      Create a class called StringDup. Given a stri ...

  10. AngularJS学习篇(九)

    AngularJS XMLHttpRequest $http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据. $http.get('someUrl',config).then(s ...