本篇目录:

4.1 了解v-bind指令

4.2 绑定class的几种方式

4.3 绑定内联样式

DOM元素经常会动态地绑定一些class类名或style样式,本章将介绍使用v-bind指令来绑定class和style的多种方法。

4.1 了解v-bind指令

在第2章时,我们已经介绍了指令v-bind的基本用法以及它的语法糖,它的主要用法是动态更新HTML元素上的属性。
回顾一下下面的示例:

 <div id="app">
<a v-bind:href="url">超链接</a>
<img v-bind:src="imgUrl">
<!-- 缩写为 -->
<a :href="url">超链接</a>
<img :src="imgUrl">
</div> <script>
var app = new Vue({
el: "#app",
data: {
url: "https://www.geeksss.com",
imgUrl: "http://www.geeksss.com/logo.png"
}
});
</script>

链接的href属性和图片的src属性都被动态设置了,当数据变化时,就会重新渲染。

在数据绑定中,最常见的两个需求就是元素的样式名称class和内联样式style的动态绑定。
它们也是HTML的属性,因此可以使用v-bind指令,我们只需要用v-bind计算出表达式最终的字符串就可以。
不过有时候表达式的逻辑较复杂,使用字符串拼接方法较难阅读和维护,所以Vue.js增强了对classstyle的绑定。

4.2 绑定class的几种方式

4.2.1 对象语法

v-bind:class设置一个对象,可以动态地切换class,例如:

 <div id="app">
<div :class="{ 'active' : isActive }"></div>
</div> <script>
var app = new Vue({
el: "#app",
data: {
isActive: true
}
});
</script>

提示:
上面的:class等同于v-bind:class,是一个语法糖,如不特殊说明,后面都将使用语法糖写法,可以回顾第2.3章节。

上面示例中,类名active依赖于数据isActive
当其为true时,<div>会拥有类名active,为false时则没有。
所以上例最终渲染完的结果是:

 <div id="app">
<div class="active"></div>
</div>

对象也可以传入多个属性,来动态切换class。
另外,:class可以与普通class共存,例如:

 <div id="app">
<div class="static" :class="{'active':isActive, 'error':isError}"></div>
</div> <script>
var app = new Vue({
el: "#app",
data: {
isActive: true,
isError: false
}
});
</script>

:class内的表达式每项为真时,对应的类名就会加载,上面渲染后的结果为:

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

当数据isActiveisError变化时,对应的class类名也会更新。
比如当isErrortrue时,渲染后的结果为:

 <div id="app">
<div class="static active error"></div>
</div>

:class的表达式过长或逻辑复杂时,还可以绑定一个计算属性。
这是一种很友好和常见的用法,一般当条件多于两个时,都可以使用datacomputed
例如使用计算属性:

 <div id="app">
<div :class="classes"></div>
</div> <script>
var app = new Vue({
el: "#app",
data: {
isActive: true,
error: null
},
computed: {
classes: function() {
return {
active: this.isActive && !this.error,
"text-fail": this.error && this.error.type === "fail"
};
}
}
});
</script>

除了计算属性,你也可以直接绑定一个Object类型的数据,或者使用类似计算属性的methods

4.2.2 数组语法

当需要应用多个class时,可以使用数组语法,给:class绑定一个数组,应用一个class列表:

 <div id="app">
<div :class="[activeCls, errorCls]"></div>
</div> <script>
var app = new Vue({
el: "#app",
data: {
activeCls: "active",
errorCls: "error"
}
});
</script>

渲染后的结果为:

 <div id="app">
<div class="active error"></div>
</div>

也可以使用三元表达式来根据条件切换class,例如下面的示例:

 <div id="app">
<div :class="[isActive ? activeCls : '', errorCls]"></div>
</div> <script>
var app = new Vue({
el: "#app",
data: {
isActive: true,
activeCls: "active",
errorCls: "error"
}
});
</script>

样式error会始终应用,当数据isActivetrue时,样式active才会被应用。

class有多个条件时,这样写较为繁琐,可以在数组中使用对象语法:

 <div id="app">
<div :class="[{'isActive':isActive}, errorCls]"></div>
</div> <script>
var app = new Vue({
el: "#app",
data: {
isActive: true,
errorCls: "error"
}
});
</script>

当然,与对象语法一样,也可以使用datacomputedmethods三中方法。
以计算属性为例:

 <div id="app">
<button :class="classes">按钮</button>
</div> <script>
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
}
];
}
}
});
</script>

示例中的样式btn会始终应用,当数据size不为空时,会应用样式前缀btn-,后加size的值。
当数据disabledtrue时,会应用样式btn-disabled
所以该示例最终渲染的结果为:

 <div id="app">
<button class="btn btn-large btn-disabled">按钮</button>
</div>

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

4.2.3 在组件上使用

提示:
本节内容依赖第7章组件相关的内容,如果你尚未了结过Vue.js的组件,可以先跳过这节,稍后再阅读。

如果直接在自定义组件上使用class:class,样式规则会直接应用到这个组件的根元素上。
例如声明一个简单的组件:

 Vue.component("my-component", {
template: "<p class='article'>一些文本</p>"
});

然后在调用这个组件时,应用上面两节介绍的对象语法或数组语法给组件绑定class
以对象语法为例:

 <div id="app">
<my-component :class="{'active':isActive}"></my-component>
</div> <script>
var app = new Vue({
el: "#app",
data: {
isActive: true
}
});
</script>

最终组件渲染后的结果为:

 <div id="app">
<p class="article active">一些文本</p>
</div>

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

4.3 绑定内联样式

使用v-bind:style(即:style)可以给元素绑定内联样式。
方法与:class类似,也有对象语法和数组语法,看起来很像直接在元素上写CSS:

 <div id="app">
<div :style="{ 'color':color, 'fontSize':fontSize+'px' }">文本</div>
</div> <script>
var app = new Vue({
el: "#app",
data: {
color: "red",
fontSize: 14
}
});
</script>

CSS属性名称使用驼峰命名(camelCase)和短横分隔命名(kebab-case)。
渲染后的结果为:

 <div id="app">
<div style="color: red; font-size: 14px;">文本</div>
</div>

大多数情况下,直接写一长串的样式不便于阅读和维护,所以一般写在datacomputed里。
data为例改写上面的示例:

 <div id="app">
<div :style="styles">文本</div>
</div> <script>
var app = new Vue({
el: "#app",
data: {
styles: {
color: "red",
fontSize: 14 + "px",
}
}
});
</script>

应用多个样式对象时,可以使用数组语法:

 <div :style="[styleA, styleB]">文本</div>

在实际业务中,:style的数组语法并不常用,因为往往可以写在一个对象里面,而较为常用的应当是计算属性。

另外,使用:style时,Vue.js会自动给特殊的CSS属性名增加前缀,比如transform

Vue.js 学习笔记 第4章 v-bind 及 class与style绑定的更多相关文章

  1. Vue.js 学习笔记 第5章 内置指令

    本篇目录: 5.1 基本指令 5.2 条件渲染指令 5.3 列表渲染指令 v-for 5.4 方法与事件 5.5 实战:利用计算属性.指令等知识开发购物车 回顾一下第2.2节,我们己经介绍过指令(Di ...

  2. Vue.js 学习笔记 第2章 数据绑定和第一个Vue应用

    本篇目录: 2.1 Vue实例与数据绑定 2.2 指令与事件 2.3 语法糖 学习任何一种框架,从一个Hello World应用开始是最快了解该框架特性的途径. 我们先从一段简单的HTML代码开始,感 ...

  3. Vue.js 学习笔记 第1章 初识Vue.js

    本篇目录: 1.1 Vue.js 是什么 1.2 如何使用Vue.js 本章主要介绍与Vue.js有关的一些概念与技术,并帮助你了解它们背后相关的工作原理. 通过对本章的学习,即使从未接触过Vue.j ...

  4. Vue.js 学习笔记 第7章 组件详解

    本篇目录: 7.1 组件与复用 7.2 使用props传递数据 7.3 组件通讯 7.4 使用slot分发内容 7.5 组件高级用法 7.6 其他 7.7 实战:两个常用组件的开发 组件(Compon ...

  5. Vue.js 学习笔记 第6章 表单与v-model

    本篇目录: 6.1 基本用法 6.2 绑定值 6.3 修饰符 表单类控件承载了一个网页数据的录入与交互,本章将介绍如何使用指令v-model完成表单的数据双向绑定. 6.1 基本用法 表单控件在实际业 ...

  6. Vue.js 学习笔记 第3章 计算属性

    本篇目录: 3.1 什么是计算属性 3.2 计算属性用法 3.3 计算属性缓存 模板内容的表达式常用语简单的运算,当其过长或逻辑复杂时,会难以维护,本章的计算属性就是用于解决该问题的. 3.1 什么是 ...

  7. Vue.js学习笔记(2)vue-router

    vue中vue-router的使用:

  8. vue.js 学习笔记3——TypeScript

    目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...

  9. Vue.js学习笔记:在元素 和 template 中使用 v-if 指令

    f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...

随机推荐

  1. CSS层叠和继承

    CSS具有两个核心的概念--继承和层叠.一般文本类的属性会被继承,即某个元素的CSS属性会传递给内部嵌套的元素.一个元素可能有一个或者多个样式的来源,当属性发生冲突时,就会根据加载顺序和权重大小决定层 ...

  2. FineReport启动后访问404

    近期将FineReport以嵌入式方式部署在Tomcat8上,启动服务后,点击导出下载出现HTTP ERROR 404情况: 百思不得其解啊,纠结了好几天: 后查看原部署Tomcat6服务器的cata ...

  3. 在Visual Studio中使用Debug Visualizers在C++中实现对原始类的自定义调试信息显示

    在Visual Studio中使用Debug Visualizers在C++中实现对原始类的自定义调试信息显示 当我们在VS的C++中使用vector.list.map等这些STL容器,在开启调试的时 ...

  4. Linux 内核模块编译 Makefile

    驱动编译分为静态编译和动态编译:静态编译即为将驱动直接编译进内核,动态编译即为将驱动编译成模块. 而动态编译又分为两种: a -- 内部编译 在内核源码目录内编译 b -- 外部编译 在内核源码的目录 ...

  5. PAT1027:Colors In Mars

    1027. Colors in Mars (20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue People ...

  6. remove方法

    1.jQuery的remove()方法 http://www.365mini.com/page/jquery-remove.htm ①返回值是jquery对象本身 所以可以做删除再添加的操作 // 移 ...

  7. TestNG 自动化测试入门教程--典型示例

    TestNG介绍 TestNG是Java中的一个测试框架, 类似于JUnit 和NUnit,   功能都差不多, 只是功能更加强大,使用也更方便 Java中已经有一个JUnit的测试框架了.  Tes ...

  8. python画出心形图

    程序员表达爱的方式真是多种多样.比如,用python来画一个心型,献给梦中的情人,代码如下: from turtle import * pensize(1) pencolor('red') fillc ...

  9. Java中的基本类型和引用类型变量的区别

    Java中的基本类型和引用类型变量的区别   学了一年多,说实话你要我说这些东西我是真说不出来是啥意思     基本类型: 基本类型自然不用说了,它的值就是一个数字,一个字符或一个布尔值. 引用类型: ...

  10. 数据保存策略(Retention Policies)

    数据保存策略(Retention Policies) InfluxDB没有提供直接删除Points的方法,但是它提供了Retention Policies.主要用于指定数据的保留时间:当数据超过了指定 ...