个人名片:
作者简介:一名大二在校生
个人主页:坠入暮云间x
座右铭:懒惰受到的惩罚不仅仅是自己的失败,还有别人的成功。
**学习目标: 坚持每一次的学习打卡
上次我们对vue的计算属性和监视属性,有了初步了解,这次我们学习vue的样式绑定属性,vue.js中常用
v-bind
动态绑定属性,这次我从对象语法和数组语法下分别介绍该如何使用他们,让我们一起看下去吧!
语法:给v-bind:class
传一个对象,再动态的切换class
用法:
<div
class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }"
>div>
<javascript type="text/css">
data: {
isActive: true,
hasError: false
}
javascript>
当
isActive
或者hasError
变化时,class
列表将相应地更新。例如,如果hasError
的值为true
,class 列表将变为 “static active text-danger
”。
active
:data中的isActive
是否为ture,若为ture
将会显示,false
则会隐藏
语法:将数组传给v-bind:class
,应用一个class列表
用法:
语法:v-bind:style
后面跟一个对象,常用{}
用法:
data: {
activeColor: 'red',
fontSize: 30
}
语法:v-bind:style
的数组语法可以将多个样式对象应用到同一个元素上:
用法:
以上是我对该知识点的总结,有什么不对的地方欢迎大家指出,互相学习,进步