最近准备更新下新做的项目,新项目不难,但是工期比较短,用到的小知识点还是比较多的,尤其是动态的class 之类的,准备更新一波语法,例如class啊,路由啊 等等,最后把项目简单的讲讲,方便以后复用些代码
这里先附上官方文档写的
https://cn.vuejs.org/guide/essentials/class-and-style.html
其实官方文档写的很详细了,但是呢 很多人并不喜欢看官方文档,我记得之前实习的时候,我同事跟我说,多看看官方文档,一直不以为然,也许看官方文档需要个时间的积累吧,因为有的官方文档确实写的很简略。
class
字符串用法
<div :class="classStr">class绑定模型数据(字符串语法)</div>
data:{
classStr:'bgRed'
}
// 渲染dom 结果
<div class="bgRed"> class绑定模型数据(字符串语法) </div>
数组用法
<div :class="classArr">class绑定模型数据(数组语法)</div>
data:{
// 一个值对应一个类名
classArr: ['bgGreen','fontRed'],
}
// 渲染dom 结果
<div class="bgGreen fontRed"> class绑定模型数据(数组语法) </div>
<div :class="['bgGreen', 'fontRed']">class绑定模型数据(数组语法)</div>
数组中使用三元表达式
<div :class="['red', 'thin', isactive?'red':'yellow']">内容</div>
说明:如果“isaction”的布尔值为true,那么使用“red”类,否则“yellow”。
<div :class="['red', 'thin', {'active': isactive}]">内容</div>
说明:“ {'active': isactive}”中的“isactive”的值为true时,那么使用该类。为false就不使用该类。
<div :class="[ activeClass, errorClass ]">111</div>
data() {
return {
activeClass: "active",
errorClass: "text-danger"
};
},
渲染结果:<div class="active text-danger"> 111 </div>
对象用法
<h1 v-bind:class="classObj">class绑定模型数据(对象语法) </h1>
data:{
classObj: {
bgBlue: true,
'text-danger': true
},
}
<div class="static" :class="{'active':isActive,'error':isError}"></div>
<div class="test" :class="{ active: isActive }">111</div>
data() {
return {
isActive: true
};
},
// 渲染dom 结果
<div class="test active"> Ananiah </div>
<div :class='classObj'>11</div>
computed:{
classObj(){
return active: this.isActive
}
在计算属性中使用
style
字符串用法
数组用法
不推荐
对象用法
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<div :style="{ 'font-size': fontSize + 'px' }"></div>
data() {
return {
activeColor: 'red',
fontSize: 30
}
}
<div :style="styleObject"></div>
data() {
return {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
}