Class与Style绑定
本文主要介绍如何使用Vue来绑定操作元素的class列表和内联样式(style属性).
因为class和style都是属性,所以通过v-bind命令来处理它们:只需要通过表达式计算出结果即可,不过字符串拼接麻烦且易错。因此,再将v-bind用于class和style属性时,Vue.js做了专门的增强,表达式结果类型除了字符串以外还可以是对象或者数组.
1、对象语法
(1)、绑定的数据对象内联在模版中
我们可以通过给html标签追加v-bind:class的指令,以动态的切换class,html代码如下:
<body>
<div id="pageIndex">
<div class="static" v-bind:class="{active:isActive,'text-danger':hasError}">aaa</div>
</div>
</body>
上面代码中的active和text-danger这两个类选择器是否存在取决于数据属性中的isActive和hasError是否为true,为true的话,类选择器就不存在,js代码如下:
var currentPage=new Vue({
el:"#pageIndex",
data:{
isActive:true,
hasError:true
}
});
如上代码所示,v-bind:class指令可以和普通class共存,当isActive和hasError发生变化时,class列表也会进行相应的更新,
(2)、绑定的数据对象不内联在模版中
<body>
<div id="pageIndex">
<div class="static" v-bind:class="classObject">aaa</div>
</div>
</body>
<script type="text/javascript">
var currentPage=new Vue({
el:"#pageIndex",
data:{
classObject:{
"active":true,
"text-danger":true
}
}
});
</script>
结果和(1)中的一模一样.
(3)、绑定的数据对象不内联在模版中,且该数据对象可以通过计算属性得出
<body>
<div id="pageIndex">
<div class="static" v-bind:class="classObject">aaa</div>
</div>
</body>
<script type="text/javascript">
var currentPage=new Vue({
el:"#pageIndex",
data:{
isActive:true,
error:null
},
computed:{
classObject:function(){
return {
active:this.isActive && !this.error,
'text-danger':this.error && this.error.type === 'fatal'
}
}
}
});
</script>
(4)、绑定内联样式
Vue通过v-bind:style指令给dom元素绑定样式,v-bind:style看着非常像css,但它其实是一个Javascript对象.CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) 来命名：
<body>
<div id="pageIndex">
<div v-bind:style="{color:activeColor,fontSize:fontSize+'px'}">aaa</div>
</div>
</body>
<script type="text/javascript">
var currentPage=new Vue({
el:"#pageIndex",
data:{
activeColor: 'blue',
fontSize: 30
}
});
</script>
上述语法虽然正确,但是直接绑定一个样式对象会更好,这会让模版更清晰:
<body>
<div id="pageIndex">
<div v-bind:style="styleObject">aaa</div>
</div>
</body>
<script type="text/javascript">
var currentPage=new Vue({
el:"#pageIndex",
data:{
styleObject:{
color: 'red',
fontSize: '13px'
}
}
});
</script>
同样的对象语法常常结合计算属性使用.
2、数组语法
(1)、普通用法
Vue提供了一种机制,可以把一个数组传递给v-bind:class,以应用一个class列表:
<body>
<div id="pageIndex">
<div v-bind:class="[activeClass, errorClass]">aaa</div>
</div>
</body>
<script type="text/javascript">
var currentPage=new Vue({
el:"#pageIndex",
data:{
activeClass:"active",
errorClass:"text-danger"
}
});
</script>
(2)、数组语法中使用三元表达式切换列表中的class
如果你想根据条件切换列表中的class,可以使用三元表达式,Vue支持在数组语法中使用三元表达式.
<body>
<div id="pageIndex">
<div v-bind:class="[isActive?activeClass:'',errorClass]">aaa</div>
</div>
</body>
<script type="text/javascript">
var currentPage=new Vue({
el:"#pageIndex",
data:{
isActive:false,
activeClass:"active",
errorClass:"text-danger"
}
});
</script>
(3)、数组语法中嵌套对象语法
当有多个条件class时上面的在数组语法中使用三元表达式难免有点繁琐,所以这个时候可以在数组语法中嵌套对象语法,使代码尽可能的简洁,代码如下:
<body>
<div id="pageIndex">
<div v-bind:class="[{activeClass:isActive},errorClass]">aaa</div>
</div>
</body>
<script type="text/javascript">
var currentPage=new Vue({
el:"#pageIndex",
data:{
isActive:true,
activeClass:"active",
errorClass:"text-danger"
}
});
</script>
(4)、绑定内联样式
v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上,代码如下:
<body>
<div id="pageIndex">
<div v-bind:style="[baseStyles, overridingStyles]">aaa</div>
</div>
</body>
<script type="text/javascript">
var currentPage=new Vue({
el:"#pageIndex",
data:{
baseStyles:{
color:"blue"
},
overridingStyles:{
background:"yellow"
}
}
});
</script>
注:当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀。
3、多充值
从 2.3.0 起你可以为 style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。
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 ...
随机推荐
- idea使用svn提交时出现错误Warning not all local changes may be shown due to an error
参考于https://www.cnblogs.com/zhujiabin/p/6708012.html 解决方案: 1.File > Settings > Version Control ...
- java.sql.SQLException: null, message from server: "Host 'xxx' is not allowed to connect to this MySQL server"
java.sql.SQLException: null, message from server: "Host 'xxx' is not allowed to connect to thi ...
- An existing resource has been found at location D:\Tomcat 7\apache-tomcat-7.0.55\webapps。。。
这个错误是说你的资源丢失,就是说tomcat无法解析你的.class文件,需要自己重新配置一下. 解决方法: 右击项目名 ---> 点击properties --> 在搜索栏里 输入 WE ...
- update 操作用法
--update 这个字段的所值为2 update tab a set a.字段1=2; --带条件的update update tab a set a.字段1=2 where id=10000; - ...
- 电信网上营业厅-客户充值缴费时间段数据挖掘--spss
最近研究分析了“云南电信网上营业厅”e9宽带续约缴费的数据,目前宽带续约量为171人,今天需要谈论的是:如何利用SPSS挖掘出“客户充值缴费的时间段”客户喜欢在哪个时间段来网厅进行充值缴费 云南电信网 ...
- Object_C初始化方法, 遍历构造器
//版本1 //- (id)init //{ // work = @"工作"; // return self; //} // // //版本2:调用父类的init ...
- 测试-LoadRunner
1录脚本 设置解析方式,html形式,会精炼成一个函数,此时找有用的url,写出函数:url方式,函数比较多. 参数化 两参数成对时,在脚本处选成对. 加上进程,加上返回值判断. 最后一段接口url, ...
- （线段树）Mayor's posters --poj -- 2528
链接: http://poj.org/problem?id=2528 覆盖问题, 要从后往前找, 如果已经被覆盖就不能再覆盖了,否则就可以覆盖 递归呀递归什么时候我才能吃透你 代码: #include ...
- windows下C++实现遍历本地文件
1.假设本地 d:/ 下存放着0.txt,1.txt两个文件 2.开发工具VS,开发语言C++,怎么遍历得到两个文件呢? 废话不多,具体代码请看下面: /** * 入参:文件存放文件夹路径,例如D:\ ...
- 用于sql代码实现用户的创建，以及不同用户之间登陆的切换
--1.准备工作.创建两个登录名Create Login Login1 with Password='123456';Create Login Login2 with Password='123456 ...