Vue003_class 与style 绑定

class 与style 绑定

理解

1) 在应用界面中, 某个(些)元素的样式是变化的
2) class/style 绑定就是专门用来实现动态样式效果的技术

class 绑定

1) :class='xxx'
2) 表达式是字符串: 'classA'
3) 表达式是对象: {classA:isA, classB: isB}
4) 表达式是数组: ['classA', 'classB']

style 绑定

1) :style="{ color: activeColor, fontSize: fontSize + 'px' }"
2) 其中activeColor/fontSize 是data 属性

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.classA{color: red;}.classB{background: blue;}.classC {font-size: 20px;}</style></head><body><div id="demo"><h2>1.class绑定::class='xxx'</h2><p class="classB" :class="a">表达式是字符串：'classA'</p><p :class="{classA: isA,classB: isB}"></p><p :class="['classA','classB']">表达式是数组：['classA','classB']</p><h2>2.style绑定</h2><p :style="{color,fontSize}">style="{color: activeColor,fontSize: fontSize + 'px'}"</p><button @click="update" ></button></div><script type="text/javascript" src="js/vue.js"></script><script>new Vue({el: '#demo',data: {a:'classA',isA: true,isB: false,color: 'red',fontSize: '20px'},methods: {update() {this.a = 'classC'this.isA = falsethis.isB = truethis.color = 'blue'this.fontSize = '30px'}}})</script></body>
</html>

结果展示

Vue003_class 与style 绑定相关推荐

Class与Style绑定
本文主要介绍如何使用Vue来绑定操作元素的class列表和内联样式(style属性). 因为class和style都是属性,所以通过v-bind命令来处理它们:只需要通过表达式计算出结果即可,不过字符 ...
Vue.js Class 与 Style 绑定
操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易错.因此,在将 ...
vue html绑定数组,VueJs Class 与 Style 绑定数组语法
应用介绍操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易错.因 ...
vue清除绑定的class_vue 的 class 和 style 绑定的方法【05】
学习要点:1.绑定 class 2.绑定 style 本节课我们来开始学习 Vue 的 class 和 style 绑定的方法. 一．绑定 class 1. v-bind:class 不但可以设置 c ...
6.Vue Class 与 Style 绑定
操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是 attribute,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易 ...
Vue中计算属性与class,style绑定
var vm=new Vue({ el:'#app', data:{ a:2, }, computed:{ //这里的b是计算属性:默认getter b:{ get:function(){ retur ...
Knockout v3.4.0 中文版教程-14-控制文本内容和外观-style绑定
5. style绑定目的 style绑定用来给关联的DOM元素添加或移除一个或多个样式值.在如下情况很有用,比如,当某些值为负时,高亮显示,或者设置容器元素的宽度来匹配数值的改变. (注意:如果你不 ...
vue Class 与 Style 绑定
1. Class 绑定 1.1 对象语法普通对象单个类 <div v-bind:class="{ active: isActive }"></div> ...
Vue.2.0.5-Class 与 Style 绑定
Class 与 Style 绑定数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是属性 ,我们可以用v-bind 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼 ...