class和style绑定
在数据绑定中，一个常见需求是，将数据与元素的 class 列表，以及元素的 style 内联样式的操作绑定在一起。由于它们都是属性(attribute)，因此我们可以使用 v-bind 来处理它们：只需从表达式中计算出最终的字符串。然而，处理字符串拼接，既麻烦又容易出错。为此，在使用 v-bind 指令来处理 class 和 style 时，Vue 对此做了特别的增强。表达式除了可以是字符串，也能够是对象和数组。
与HTML的class绑定(Binding HTML Classes)
对象语法
向 v-bind:class 传入一个对象，来动态地切换 class：
<div v-bind:class="{active: isActive}"></div>
上述语法意味着，active 这个 class 的存在与否，取决于 isActive 这个 data 属性的 truthy 值。
这样，可以通过在对象中添加多个字段，来切换多个 class。此外，v-bind:class 指令也可以和普通 class 属性共存。所以，给定以下模板：
<div class="static"
v-bind:class="{active: isActive,'text-danger':hasError}">
</div>
然后，给定一下data：
<body>
<div class="static"
v-bind:class="{active: isActive,'text-danger':hasError}">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var vm = new Vue({
el: '.static',
data: {
isActive: true,
hasError: false
}
})
</script>
</body>
将会熏染为：
<div class="static active"></div>
每当 isActive 或 hasError 发生变化，class 列表就会相应地更新。例如，如果 hasError 值是 true，class 列表会变为 "static active text-danger"。
绑定对象，也可以无需内联，而是外部引用 data：
<div v-bind:class="classObject"></div>
data: {
classObject: {
active: true,
'text-danger': false
}
}
（内联、外部引用）这两种方式的渲染结果相同。我们还可以将 class 和 style 与某个 computed 属性绑定在一起，此 computed 属性所对应的 getter 函数需要返回一个对象。这是一种常用且强大的用法：
<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'
}
}
}
未完待续
class和style绑定的更多相关文章
- 关于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中class与style绑定
gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson07 一 用对象的方法绑定class 很简单,举个栗子: <!D ...
- Vue.2.0.5-Class 与 Style 绑定
Class 与 Style 绑定 数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是属性 ,我们可以用v-bind 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼 ...
- Knockout.Js官网学习（style绑定、attr绑定）
Style绑定 style绑定是添加或删除一个或多个DOM元素上的style值.比如当数字变成负数时高亮显示,或者根据数字显示对应宽度的Bar.(注:如果你不是应用style值而是应用CSS clas ...
- Style绑定
目的 style绑定可以添加或者移除DOM元素的样式值.这非常有用,例如,当值为负数时将颜色变为红色. (注:如果要修改CSS整个类,请使用css绑定) <div data-bind=" ...
- Class 与 Style 绑定
将 v-bind 用于 class 和 style 时,Vue.js 做了专门的增强.表达式结果的类型除了字符串之外,还可以是对象或数组. 绑定 HTML Class 对象语法 <div cla ...
- 前端MVC Vue2学习总结（三）——模板语法、过滤器、计算属性、观察者、Class 与 Style 绑定
Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...
- 【Vue.js】vue基础： 3种Class和Style绑定语法
凡是用到了v-bind,那就一定有变量的存在,下面是三种语法的展示: 1. 对象语法: v-bind:class="{active: isActive, 'text-danger': has ...
- Vue学习4：class与style绑定
说明:有些部分我只是相当于做一个学习笔记,加强记忆之用.所以可能阅读性不是那么强.如果有参考我这类博客的人,那么请见谅. 代码如下: <!DOCTYPE html> <html la ...
随机推荐
- GCC 使用-C语言编译过程
任何一种高级语言,要想在机器上执行,必须翻译为机器能读懂的机器语言.编译器就相当于翻译官,将高级语言翻译为机器语言. GCC 最初只用了编译 C 语言程序,全称是 GNU C Compiler.后来扩 ...
- Shiro 学习
<转载于 凯涛 博客> Shiro目录 第一章 Shiro简介 第二章 身份验证 第三章 授权 第四章 INI配置 第五章 编码/加密 第六章 Realm及相关对象 第七章 ...
- laravel 添加后台登陆守护器
后台不能在一个浏览器登陆,下面简单配置下即可解决这个问题. 设置路由如下: <?php /** * 后台路由,从Illuminate\Routing\Router控制器的auth()方法中复制过 ...
- Android Jenkins自动打包纪录
关于Jenkins自动打包Android的apk包,网上官方的太多,这里简单纪录一下博主的经历和打包的参数纪录 (本篇文章需要对Jenkins有最基本的基础了解) 博主所在公司曾负责app测试过程中发 ...
- 修改了Ubuntu下的/usr目录权限，导致不能使用sudo命令的修复-----转载
刚开始运行sudo时,报了下面这个错误 sudo: must be setuid root,于是上网找解决方法,搜索出来的都是这样解决的 ls -l /usr/bin/sudochown root: ...
- Windows.命令行(CMD)_执行命令&环境变量
1.CMD命令中如果 命令有换行的话,就使用 ^来连接(这就类似于 Linux命令行中 \ 的作用) 2.环境变量 2.1.显示 所有环境变量的值,命令:set 2.2.显示 某个环境变量的值,命令 ...
- 【Go语言】map在goroutine通信中的使用问题
简介 本篇文章的主要内容是解决go语言map在使用中遇到的两个问题,对于初学者是不可避免的坑 一.cannot assign to struct field 当map中存在struct类型的成员,如果 ...
- 万万没想到，Spring Boot 竟然这么耗内存！
Spring Boot总体来说,搭建还是比较容易的,特别是Spring Cloud全家桶,简称亲民微服务. 但在发展趋势中,容器化技术已经成熟,面对巨耗内存的Spring Boot,小公司表示用不起. ...
- P3984高兴的津津
这道题的标签是并查集,但其实是一个并查集思想的模拟题. 被算法标签迷惑了,一直在想怎么存f[],然后怎么查找,但发现其实很难去做.然后就发现其实就是做一个选择就可以了:拿AU的第i次包含在i-1次里, ...
- BZOJ 4033: [HAOI2015]树上染色题解
BZOJ 4033: [HAOI2015]树上染色题解(树形dp) 标签:题解 阅读体验:https://zybuluo.com/Junlier/note/1327400 原题地址: BZOJ 403 ...