Hello小伙伴们,还记得上一次讲到什么了吗?模板语言是什么呀~为什么要把绑定挪到这里来分享呢,是因为它用到了我们上次说到的指令v-,这里用到的是v-bind。
Class
在我们平时的开发工作中,我们常常会需要对class进行变化,从而达到某些目的,比如一个组件的交互等。这些都会涉及大量的JS代码,在Vue中,我们需要做的只是计算出字符串的结果就行了。举个例子:
1) 在HTML中:
<div v-bind:class="{ active: isActive }"></div>
我们给div绑定了active class,这个class会不会生效则是决定于isActive的值,我们只需对这个值进行操作就可以控制class了。
2) 在js中
data: { isActive: true }//这就有这个class了
data: { isActive: false}//这就没有这个class了
当然,这传给class的对象也可以是多条,
比如<div v-bind:class="{ rabbit: isRabbit, lovely: isLovely }"></div>
3)当isRabbit和isLovely都为true时,则渲染成:
<div class="rabbit lovely"></div>
4)我们甚至可以把整个class对象摘到js中去写,其实效果是一样的了。
5) 还有一种写法就是,不是通过变换class绑定的值来改变class,二是通过改变class名称来改变:
<div v-bind:class="[rabbitClass, dogClass]"></div>
我们这里要做的是给rabbitClass和dogClass赋值,得到className
data: { rabbitClass: 'rab', dogClass: 'doggie'}
渲染成为:<div class="rab doggie"></div>
Style
对于Style来说,在JS中改变style那么就避免不了DOM的操作了,这其实是很浪费的。在Vue中也可以像绑定class一样,绑定style。
1)在HTML中:
<div v-bind:style="{ color:rabbitColor , font-size: size }"></div>
2)在js中:
data: { rabbitColor: 'white', size: 12}
3) 渲染效果:
<div style="color: 'white'; font-size:12;"></div>
4) 同class一样,style也可以直接改变style:
<div v-bind:style="[rabbitStyles, catStyles]"></div>
所以class和style可以对应来看,今天的分享就到这里啦,喜欢兔妞的文章请关注并点击在看哟~~