class
的对象绑定
在开发的过程中,难免会给dom
元素添加一些样式,在 Vue 之中我们该如何绑定样式呢?
现在有这样一个想法,div
被点击一次,变成红色,当再次被点击时,恢复为默认的颜色, 再点击一次又变成红色,想实现这样的操作,如果凭借以前对 Vue 的了解,好像是没有办法实现的,因为我们很难想到数据如何和样式进行绑定,Vue 是面向数据的一种编程方式,它不在是直接操作dom
的编程方式了,所以呢,我们希望某些数据和样式做一个关联,数据一变,样式就会变:
<div id="app">
<div @click="handleDivClick"
:class="{activated: isActivated}"
>Hello world</div>
</div>
let vm = new Vue({
el: '#app',
data: {
isActivated:false, //初始化时,这个值为 false,所以 activated 肯定不会显示
},
methods: {
handleDivClick(){
this.isActivated = true
}
}
})
dom
里面只要有:
的地方都是js
的表达式,这里面:class
的意思是:Hello World
这个div
有个class
值为activated
,它到底现不显示,取决于data
里的isActivated
这个变量是true
还是false
。这里面初始化时,这个值为false
,所以activated
肯定不会显示。
当我点击时,我希望将这个class
展示出来,只需将isActivated
值变成true
,数据变化,页面恰好通过:class
和数据进行了绑定,所以isActivated
值变为true
时,前面样式的名字就会显示在页面上,通过这个功能就能实现,点击一次变红的效果。
那如何实现再点击一次变成默认颜色呢?只需对这个值取反就行了。
handleDivClick(){
this.isActivated = !this.isActivated //这里不让它等于 true,而是对这个值进行取反
}
这就是借助class
和对象的形式实现数据和样式的绑定,称作为class
的对象绑定。
class
的数组绑定
<div id="app">
<div @click="handleDivClick"
:class="[activated]"
>Hello world</div>
</div>
let vm = new Vue({
el: '#app',
data: {
activated: '' //初始化时,activated 为空,所以 class 肯定是没有值的。
},
methods: {
handleDivClick(){
this.activated = 'activated'
}
}
})
:class
那边不在是一个对象了,取而代之我去写一个数组,在数组里面呢,我写个activated
,这个时候它指的是啥呢,应该这么去读Hello world
这个div
上的class
,这个class
是什么呢?它显示的是activated
这个变量里的内容。
初始化时,activated
为空,所以class
肯定是没有值的。通过这种写法,我想把Hello world
样式置红,应该怎么写呢?只需将activated
这个变量由空字符串改变为'activated'
,就可以了,这样div
标签上就会有个值为activated
的class
。
那当我点击第二下时,页面会变成默认颜色吗?很显然是不会的,那要怎么实现呢?只需做一个简单的判断
handleDivClick(){
if(this.activated === 'activated'){
this.activated = ''
}else{
this.activated = 'activated'
}
}
上面这样写呢,代码有点冗余,可以用一个三元表达式来代替:
handleDivClick(){
this.activated = this.activated === 'activated' ? '' : 'activated'
}
这里是借助class
和数组相绑定,这个数组代表的是什么呢?它代表的是一个变量,class
上会显示这个变量的内容。
既然class
是一个数组,就可以定义多个变量,:class="[activated,activatedOne]"
通过这两种方式,我们可以动态的向一个dom
元素上,添加或删除不同的class
,从而实现页面效果的一个变更,
style
改变dom
样式
讲到这里,你是不是会想,我可以不可以通过改变style
,来改变页面的样式,显然是可以的。那如何来实现呢?
<div id="app">
<div @click="handleDivClick"
:style="styleObj"
>hello world</div>
</div>
let vm = new Vue({
el: '#app',
data: {
styleObj: {
color: 'black' //这种写法是,div 有一个内联样式,内容是 color: black
}
},
methods: {
handleDivClick(){
this.styleObj.color = this.styleObj.color === 'black ? 'red' : 'black'
}
}
})
内联样式有两种定义方式,一种是和数组绑定,一种是和对象绑定。
:style="styleObj"
看到:
就会想到这是一个指令,后面的styleObj
一定是一个js
表达式,它对应的就是数据的一项。应该怎么写呢?
styleObj: {
color: 'black' //这种写法是,div 有一个内联样式,内容是 color: black
}
这种写法是,div
有一个内联样式,内容是color: black
。
当我点击div
时,要改变它颜色,该怎么实现,其实是和上面改变class
的方法是一样的。
methods: {
handleDivClick(){
this.styleObj.color = this.styleObj.color === 'black ? 'red' : 'black'
}
}
这是用style
对象绑定,那要是用数组绑定呢?用数组绑定,可比对象简单多了。
:style="[styleObj,{fontSize:'20px'}]" //可以直接挂在对象,也可以用一个变量,对象中如果出现连字符的,用驼峰的形式表示,值要是字符串