vue 的 Class 与 Style 绑定
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可。不过,字符串拼接麻烦且易错。因此,在将 v-bind 用于 class 和 style 时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。
1、class绑定
(1)对象语法
我们可以传给 v-bind:class 一个对象,以动态地切换 class:
active 这个 class 存在与否将取决于数据属性 isActive 的 truthiness
绑定的数据对象不必内联定义在模板里:
data: {
classObject: {
active: true,
'text-danger': false
}
}
我们也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式:
data: {
isActive: true,
error: null
},
computed: {
classObject: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}
(2)数组语法
我们可以把一个数组传给 v-bind:class,以应用一个 class 列表:
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
渲染为:
如果你也想根据条件切换列表中的 class,可以用三元表达式:
这样写将始终添加 errorClass,但是只有在 isActive 是 truthy[1] 时才添加 activeClass。
不过,当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法:
(3)用在组件上
当在一个自定义组件上使用 class 属性时,这些 class 将被添加到该组件的根元素上面。这个元素上已经存在的 class 不会被覆盖。
例如,如果你声明了这个组件:
Vue.component('my-component', {
template: '
Hi
'
})
然后在使用它的时候添加一些 class:
HTML 将被渲染为:
Hi
对于带数据绑定 class 也同样适用:
当 isActive 为 truthy[1] 时,HTML 将被渲染成为:
Hi
(4)style绑定类似
vue 的 Class 与 Style 绑定的更多相关文章
- Vue中class与style绑定
gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson07 一 用对象的方法绑定class 很简单,举个栗子: <!D ...
- vue基础——Class与Style绑定
Class与Style绑定 操作元素的class列表和内联样式是数据绑定的一个常见的需求. 因为它们都是属性,所以我们可以用v-bind来处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼 ...
- 前端框架之Vue(4)-Class与Style绑定
操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易错.因此,在将 ...
- vue基础---Class 与 Style 绑定
[一]绑定HTML Class (1)对象语法 ①普通绑定class <div id="area" v-bind:class="className"> ...
- vue中,class与style绑定
<template> <div> <p v-bind:class="{active:isActive,'demo':Demo}">嘿嘿</ ...
- 关于vue.js中class与style绑定的学习
练习代码: html: <!DOCTYPE html><html lang="en"><head> <meta charset=" ...
- Vue#Class 与 Style 绑定
绑定HTMLCLASS 在我没看这之前,我觉得要写绑定class ,应该像绑定数据一样这么写 class ={{class-a}} 看官方教程时,不推荐这么写,推荐这样 v-bind:class=&q ...
- Vue.2.0.5-Class 与 Style 绑定
Class 与 Style 绑定 数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是属性 ,我们可以用v-bind 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼 ...
- vue class与style 绑定详解——小白速会
一.绑定class的几种方式 1.对象语法 直接看例子: <div id="app3"> <div :class="{'success':isSucce ...
随机推荐
- 4.Spark环境搭建和使用方法
一.安装Spark spark和Hadoop可以部署在一起,相互协作,由Hadoop的HDFS.HBase等组件复制数据的存储和管理,由Spark负责数据的计算. Linux:CentOS Linux ...
- pdfium 之二
https://www.foxitsoftware.cn/products/premium-pdfium/feature.php 基于谷歌PDFium开源代码 谷歌采用福昕的PDF技术为其PDF开源项 ...
- Tomcat的下载和安装
登录Tomcat 站点,下载Tomcat最新版本http://tomcat.apache.org/Windows平台下载ZIP包,LInux平台下载TAR包,不建议下载安装文件,因为安装文件的 Tom ...
- Redis和MySQL数据同步及Redis使用场景
1.同步MySQL数据到Redis (1) 在redis数据库设置缓存时间,当该条数据缓存时间过期之后自动释放,去数据库进行重新查询,但这样的话,我们放在缓存中的数据对数据的一致性要求不是很高才能放入 ...
- Laravel 推荐-基础入门+实战+拓展视频教程
1.laravel基础 1.Composer:类库管理神器 - Laravel的安装和配置 2.路由:地址和方法的小媒人 - 基础路由 3.控制器:管家婆 - 基础用法 4.视图:最终结果输出 5.b ...
- 数据结构——栈与递归(recursion)
/* recursion.c */ /* 递归 */ #include <stdio.h> void interface(void); /* 斐波那契数列以及阶乘函数声明 */ long ...
- js的call()方法
// ① 当函数中没有this时,call().apply()和直接执行没有区别 function fn(){ console.log("aaa") } fn() // aaa f ...
- A1050 String Subtraction (20 分)
一.技术总结 这个是使用了一个bool类型的数组来判断该字符是否应该被输出. 然后就是如果在str2中出现那么就判断为false,被消除不被输出. 遍历str1如果字符位true则输出该字符. 还有需 ...
- CF1151F Sonya and Informatics(概率期望,DP,矩阵快速幂)
明明是水题结果没切掉……降智了…… 首先令 $c$ 为序列中 $0$ 的个数,那么排序后序列肯定是前面 $c$ 个 $0$,后面 $n-c$ 个 $1$. 那么就能上 DP 了.(居然卡在这里……) ...
- [LeetCode] 223. Rectangle Area 矩形面积
Find the total area covered by two rectilinearrectangles in a 2D plane. Each rectangle is defined by ...