文章目录

1. class 属性绑定
- 语法示例
- 完整示例
2. 属性的覆盖
- 2.1 绑定多个值相互覆盖
- - 语法示例
  - 完整示例
- 2.2 绑定一个对象（对象成员间覆盖）
- - 语法示例
  - 完整示例
3. 绑定对象的计算属性
- 语法示例
- 完整示例
4. 绑定数组
- 4.1 直接绑定一个数组
- - 语法示例
  - 完整示例
- 4.2 覆盖顺序
- 4.3 绑定一个是数组的object
- 4.4 控制数组成员是否生效
- - 语法示例
  - 完整示例
  - 再次强调顺序

1. class 属性绑定

语法示例

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

说明：
名为app的ID被 Vue实例绑定
active 是前边定义的stlye
isActive 是一个bool值，true的时候样式被调用

完整示例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CROW-宋</title><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script><style>.active {width: 100px;height: 100px;background: green;}</style>
</head><body><div id="app"><div v-bind:class="{ 'active': isActive }"></div></div><script>new Vue({el: '#app',data: {isActive: true}})</script>
</body></html>

结果显示

2. 属性的覆盖

2.1 绑定多个值相互覆盖

语法示例

三个active，前边相同项的会被后边的覆盖

<div id="app"><div class="static"v-bind:class="{ 'active1': true , 'active2': true, 'active3': true}"></div>
</div>

完整示例

代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CROW-宋</title><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script><style>.active {width: 100px;height: 100px;background: green;}.red {background: red;}.blue {background: blue;}</style>
</head><body><div id="app"><div class="static" v-bind:class="{ 'active': isActive , 'red': hasError, 'blue': true}"></div></div><script>new Vue({el: '#app',data: {isActive: true,hasError: true}})</script>
</body></html>

结果显示

active中定义的绿色会被red中定义的红色覆盖，red中定义的红色又会被后边blue定义的蓝色覆盖，最终显示为蓝色。
而active中定义的大小因为后边都没有定义，因此不会改变

2.2 绑定一个对象（对象成员间覆盖）

和2.1中效果相同

语法示例

绑定一个对象 “classObject”

  <div id="app"><div class="static" v-bind:class="classObject"></div></div>

Vue实例中，定义classObject的各成员

classObject: {active: true,red: true,blue: true
}

完整示例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CROW-宋</title><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script><style>.active {width: 100px;height: 100px;background: green;}.red {background: red;}.blue {background: blue;}</style>
</head><body><div id="app"><div class="static" v-bind:class="classObject"></div></div><script>new Vue({el: '#app',data: {classObject: {active: true,red: true,blue: true}}})</script>
</body></html>

3. 绑定对象的计算属性

语法示例

绑定一个对象

  <div id="app"><div v-bind:class="classObject"></div></div>

被绑定对象定义在voe示例的计算属性中

      computed: {classObject: function () {return {base: true,active: this.isActive && !this.error.value,danger: this.error.value && this.error.type === 'fatal',}}}

完整示例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CROW-宋</title><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script><style>.base {width: 100px;height: 100px;}.active {background: green;}.danger {background: red;}</style>
</head><body><div id="app"><div v-bind:class="classObject"></div></div><script>new Vue({el: '#app',data: {isActive: true,error: {value: false,type: 'fatal'}},computed: {classObject: function () {return {base: true,active: this.isActive && !this.error.value,danger: this.error.value && this.error.type === 'fatal',}}}})</script>
</body></html>

结果显示
满足active条件时是绿色方块
满足danger条件时是红色方块

4. 绑定数组

4.1 直接绑定一个数组

语法示例

绑定数组

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

在vue实例中定义数组中的数据

      data: {activeClass: 'active',errorClass: 'text-danger'}

完整示例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CROW-宋</title><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script><style>.active {width: 100px;height: 100px;background: green;}.text-danger {background: red;}</style>
</head><body><div id="app"><div v-bind:class="[activeClass, errorClass]"></div></div><script>new Vue({el: '#app',data: {activeClass: 'active',errorClass: 'text-danger'}})</script>
</body></html>

4.2 覆盖顺序

和数组顺序无关
和实例中定义值的顺序无关
style中定义顺序有关，相同项写在前边的会被后边的覆盖

因此上例中，如果我们如下写，就会显示绿色

  <style>.text-danger {background: red;}.active {width: 100px;height: 100px;background: green;}</style>

4.3 绑定一个是数组的object

绑定数组的object

  <div id="app"><div v-bind:class="myClass"></div></div>

在vue实例中定义数组

      data: {myClass: ['active','text-danger']}

4.4 控制数组成员是否生效

语法示例

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

说明：

errorClass 一直存在

activeClass：
true 时，activeClass生效
false时，activeClass不生效。

注意：是否能成功覆盖，和stlye中定义的顺序有关，我们将在后边说明。

完整示例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CROW-宋</title><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script><style>.text-danger {width: 100px;height: 100px;background: red;}.active {width: 100px;height: 100px;background: green;}</style>
</head><body><div id="app"><div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div></div><script>new Vue({el: '#app',data: {isActive: false,activeClass: 'active',errorClass: 'text-danger'}})</script>
</body></html>

vue实例中 isActive: false时结果
vue实例中 isActive: true时结果

再次强调顺序

和之前说的一样，数组成员覆盖顺序仍然只和style中的顺序有关

因此，我们如果这样写stlye

    .active {width: 100px;height: 100px;background: green;}.text-danger {width: 100px;height: 100px;background: red;}

即使 activeClass 生效，一样会被 errorClass 的红色覆盖。

Vue.js基础-06-绑定样式（v-bind）-01-绑定class属性（v-bind:class）相关推荐

Vue.js 基础语法入门语句 Vue学习笔记 v-model 双向数据绑定
Vue.js 基础语法,入门语句,Vue学习笔记学习网站:https://www.bilibili.com/video/BV15741177Eh vue 的体验响应式:数据一旦改变,视图就会响应改 ...
# vue.js 之对vue.js基础理解
vue.js 之对vue.js基础理解 Vue构造器 1 . Vue.js是一个构造函数,编程中称之为构造器 2 . 每一个new Vue() 都是一个Vue构造函数的实例,这个过程叫做实例化 3 ...
Vue.js基础-07-绑定事件（v-on）-01-点击事件（click）
文章目录 1. 点击事件参数(click) 1.1 基本使用 1.2 绑定一个方法 1.3 冒泡事件说明示例 2. 点击事件修饰符 2.1 .stop (阻止冒泡) 使用说明使用示例 2.2 c ...
vue.js基础知识篇(4):过滤器、class与style的绑定2
代码下载:网盘欢迎私信第一章:过滤器过滤器是对数据进行处理并返回结果的函数. 1.语法语法是使用管道符"|"进行连接.过滤器可以接收参数,跟在过滤器后面,带引号的参数被当做 ...
Vue.js：使用v-bind为多个元素绑定style样式案例
使用v-bind为多个元素绑定单个style 此案例主要是通过v-bind:style在元素上绑定单个style,实现为元素设置不同的样式的效果.当在浏览器中的页面进行显示的时候,如果不勾选复选框,则 ...
vue.js 基础学习 11天 -- 转载某培训机构学习资料（转载链接未找到-暂定原创 - 非原创）
Vue.js - Day1 课程介绍前5天: 都在学习Vue基本的语法和概念:打包工具 Webpack , Gulp 后5天: 以项目驱动教学: 什么是Vue.js Vue.js 是目前最火的一个前 ...
Vue.js基础教程
一.简单介绍是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当 ...
vue js基础语法
什么是vue vue是目前前端主流的js框架,它和库的区别在于: 库是更多是一个封装好的特定的集合,提供给开发者使用,而且是特定于某一方面的集合(方法和函数),库没有控制权,控制权在使用者手中,在库中 ...
Vue.js基础知识
一.Vue.js是什么? 它是一套用于构建用户界面的渐进式框架.其设计为自底向上逐层应用.Vue只关心视图层. 二.声明式的渲染 1. Vue.js的核心是采用简洁的模板语法来声明式地将数据渲染到DO ...

Vue.js基础-06-绑定样式（v-bind）-01-绑定class属性（v-bind:class）

文章目录

1. class 属性绑定

语法示例

完整示例

2. 属性的覆盖

2.1 绑定多个值相互覆盖

语法示例

完整示例

2.2 绑定一个对象（对象成员间覆盖）

语法示例

完整示例

3. 绑定对象的计算属性

语法示例

完整示例

4. 绑定数组

4.1 直接绑定一个数组

语法示例

完整示例

4.2 覆盖顺序

4.3 绑定一个是数组的object

4.4 控制数组成员是否生效

语法示例

完整示例

再次强调顺序

Vue.js基础-06-绑定样式（v-bind）-01-绑定class属性（v-bind:class）相关推荐

最新文章

热门文章