文档章节

Vue- 对象语法 v-bind:class与对象语法的使用

文文1
 文文1
发布于 11/17 17:12
字数 565
阅读 7
收藏 0

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

<div v-bind:class="{ active: isActive }"></div>//对象语法也就是在v-bind:class绑定一个对象的时候,里面的值将影响最终取值,
//比如如果 这里isActive的值为true 则会被渲染成class='active' 如果为false , 则 不会存在.
//一般情况 {A:xx ,B:xx}的写法是json格式写法,只能以key/value的形式被识别,而不会像例子中一样直接被处理,如果value的值为true则,key绑定在class里面


上面的语法表示 classactive 的更新将取决于数据属性 isActive 是否为真值 。

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

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


如下 data:

data: {
   isActive: true,
   hasError: false
}


渲染为:

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


当 isActive 或者 hasError 变化时,class 列表将相应地更新。例如,如果 hasError 的值为 true , class列表将变为 "static active text-danger"。

你也可以直接绑定数据里的一个对象:

<div v-bind:class="classObject"></div>
data: {
   classObject: {
       active: true,
       text-danger: false
   }
}


渲染的结果和上面一样。我们也可以在这里绑定返回对象的计算属性。这是一个常用且强大的模式:

<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]">
data: {
   activeClass: 'active',
   errorClass: 'text-danger'
}


渲染为:

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


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

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


此例始终添加 errorClass ,但是只有在 isActive 是 true 时添加 activeClass 。

不过,当有多个条件 class 时这样写有些繁琐。可以在数组语法中使用对象语法:

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

 

本文转载自:https://blog.csdn.net/a250758092/article/details/58604172 

共有 人打赏支持
文文1
粉丝 21
博文 373
码字总数 119521
作品 0
长沙
程序员
私信 提问
前端框架之Vue.js 库的使用

vue.js简介 Vue.js是前端三大新框架:Angular.js、React.js、Vue.js之一,Vue.js目前的使用和关注程度在三大框架中稍微胜出,并且它的热度还在递增。 Vue.js可以作为一个js库来使用,也可以用...

玄学酱
06/22
0
0
深入解析VueJs中的V-bind指令

v-bind 主要用于属性绑定,比方你的class属性,style属性,value属性,href属性等等,只要是属性,就可以用v-bind指令进行绑定.这次主要介绍了VueJs中的V-bind指令,需要的朋友可以参考下 v-...

前端攻城老湿
11/29
0
0
v-bind 及 class 与 style 绑定

DOM 元素经常会动态地绑定一些 class 类名或 style 样式。 一、了解 v-bind 指令 v-bind 指令的主要用法是动态更新 HTML 元素上的属性,可使用 v-bind 指令绑定 class 和 style 。如下,示例...

Mr_ET
10/20
0
0
Vue 实战 (一) -- Vue 基础总结

Vue作为一个前端轻量级的MVVM框架有其独到之处,本文主要针对Vue1.0版本的官方文档进行梳理总结,主要包括以下几个方面: 1.数据绑定 2.指令 3.组件 4.事件 5.过滤器 Vue基础 Vue实例 构造器 通...

小和子茶
07/17
0
0
Vue 入门之项目目录结构介绍

Vue 是一套用于构建用户界面的渐进式框架,与其它大型的页面框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另...

code_xzh
05/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

【转载】缓存穿透,缓存击穿,缓存雪崩解决方案分析

前言 设计一个缓存系统,不得不要考虑的问题就是:缓存穿透、缓存击穿与失效时的雪崩效应。 缓存穿透 缓存穿透是指查询一个一定不存在的数据,由于缓存是不命中时被动写的,并且出于容错考虑...

xiaomin0322
8分钟前
0
0
Maven: Non-resolvable import POM:Failure to find *** in *** was cached in the local repository.

clean or package spring cloud 项目时,IDE 打印如下报错: Non-resolvable import POM: Failure to find org.springframework.cloud:spring-cloud-dependencies:pom:Greenwich.M3 in https......

AmosWang
12分钟前
0
0
性能优化(性能优化概述)

软件系统质量特性 安全性 同时兼顾向合法用户提供服务,以及阻止非授权使用软件及资源的能力。 健壮、可靠 软件系统在一定的时间内无故障运行的能力、容错能力、恢复能力 。 可用性、易用性、...

这很耳东先生
16分钟前
0
0
ZooKeeper命令大全

创建节点 # 创建节点,-s表示顺序节点,-e表示临时节点,默认是持久节点create [-s] [-e] path data acl # 示例create /zk-book 123 查看节点 ls path [watch] # 示例ls /zk-book 获取...

爱宝贝丶
26分钟前
2
0
Elasticsearch节点角色类型node.master和node.data说明s

一般地,ElasticSearch集群中每个节点都有成为主节点的资格,也都存储数据,还可以提供查询服务。这些功能是由两个属性控制的(node.master和node.data)。默认情况下这两个属性的值都是tru...

傲娇字符
42分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部