Vue的Class 与 Style 绑定
2017-12-16 22:43
691 查看
如果想冬天改变class的样式,一般有以下几种写法
1、对象语法
这样表示当totalCount>0时,highlight这个样式有效
绑定多个class:
列表将相应地更新。例如,如果
列表将变为
我们也可以通过绑定一个计算属性,这里不作介绍。
2、数组语法
三元表达式:
记住,三元表达式一定要写在[]内
不过,当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法:
这样表示当isactive为true时active才有效,errorclass是一直有效
如果想定义多个class:
这里咋一看,对象语法和数组语法绑定多个class有相似之处,那么有什么区别呢?我个人理解,对象语法是通过控制值的Boolean值从而控制class,而数组更多的像把一个值直接赋值给这个class。当然,一般来说需要计算的表达式一般会写在{}内,除了三元表达式。
参考官网:https://cn.vuejs.org/v2/guide/class-and-style.html
1、对象语法
<div class="logo" :class="{'highlight':totalCount>0}">
这样表示当totalCount>0时,highlight这个样式有效
绑定多个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"。
我们也可以通过绑定一个计算属性,这里不作介绍。
2、数组语法
三元表达式:
<div class="pay" :class="[totalPrice>=minPrice?'enough':'not-enough']">
记住,三元表达式一定要写在[]内
不过,当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法:
<div v-bind:class="[{ active: isActive }, errorClass]"></div>
这样表示当isactive为true时active才有效,errorclass是一直有效
如果想定义多个class:
<div v-bind:class="[activeClass, errorClass]"></div> data: { activeClass: 'active', errorClass: 'text-danger' } //渲染为: <div class="active text-danger"></div>
这里咋一看,对象语法和数组语法绑定多个class有相似之处,那么有什么区别呢?我个人理解,对象语法是通过控制值的Boolean值从而控制class,而数组更多的像把一个值直接赋值给这个class。当然,一般来说需要计算的表达式一般会写在{}内,除了三元表达式。
参考官网:https://cn.vuejs.org/v2/guide/class-and-style.html
相关文章推荐
- vue中Class 与 Style 绑定
- vue class与style绑定
- VUE2.0 全套 demo 讲解 基础 5(class 与 style 绑定)
- vue从入门到进阶:Class 与 Style 绑定(四)
- Vue - class与style绑定
- Vue中Class与Style绑定
- Vue中class与style绑定
- Vue.js笔记第二波,Class 与 Style 绑定,条件渲染,列表渲染
- Vue基础(Class 与 Style 绑定)
- Vue.js-----轻量高效的MVVM框架(六、Class与Style绑定)
- Class 与 Style 绑定HTML Class(vue.js)
- Vue Class 与 Style 绑定
- Vue.js笔记-计算属性 class与style绑定
- Vue基础之Class和Style绑定
- vuejs教程4-Class 与 Style 绑定
- vue学习记录(数据绑定、class,style绑定)
- [js高手之路] vue系列教程 - 绑定class与行间样式style(6)
- Vue.js-Class与Style绑定
- 【Vue】-(5) 计算属性与class,style绑定
- vue.js入门教程之绑定class和style样式