vue学习笔记-6-样式绑定
一，通过标识位来控制class的样式是否启用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
[v-cloak]{
display:none
}
#app{
width: 20%;
margin: 200px auto;
line-height: 40px;
border: 1px solid #ccc;
padding: 10px;
}
.active{
height: 50px;
width: 100;
background: red;
}
</style>
</head>
<body>
<div id="app">
<div :class="{active:isActive}"></div>
<!-- 利用v-bind来变更样式，其中active是class名，isActive是其标识位 -->
<button @click="changeClass1">样式是否启用的切换</button>
</div>
<script type="text/javascript" src="./js/vue.min.js"></script>
<script type="text/javascript">
var vm=new Vue({
el: "#app",
data:{
url:'http://www.baidu.com',
isActive:true
},
methods:{
changeClass1:function(){
this.isActive=!this.isActive
}
}
})
</script>
</body>
</html>
二，通过数组类名的方法：
而对于数组语法，则是能够同时定义好几个类，然后，通过清空类名和设置类名的方式达到设置不同样式的效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
[v-cloak]{
display:none
}
#app{
width: 20%;
margin: 200px auto;
line-height: 40px;
border: 1px solid #ccc;
padding: 10px;
}
.color{
height: 50px;
width: 100;
background: red;
}
.border{
border: 2px solid #000;
}
</style>
</head>
<body>
<div id="app">
<div :class="[class1,class2]"></div>
<!-- 里面有两个类名，对应不同的样式 -->
<button @click="changeClass1">不启用其中一个样式</button>
<button @click="changeClass2">启用其中一个样式</button>
</div>
<script type="text/javascript" src="./js/vue.min.js"></script>
<script type="text/javascript">
var vm=new Vue({
el: "#app",
data:{
url:'http://www.baidu.com',
class1:'color',
class2:'border'
},
methods:{
changeClass1:function(){
this.class2=''
},
changeClass2:function(){
this.class2='border'
}
}
})
</script>
</body>
</html>
三，细节
1，对象绑定和数组绑定可以组合使用：
2，默认的class会保留
3，class绑定的值可以简化操作：
把类名存储到vm中的数组中。
四，一个样式通用，另一个样式随着v-for变化的写法
实现效果
五，结合三目运算符绑定样式，自定义轮播图的指示器
六，通用样式加三目运算符绑定样式
:class="['inputBox',drawerType=='积分操作'?'jifen':'huiyuan']"
七，样式绑定可以使用函数返回的形式
<!-- 头部区域的样式 -->
<div class="styleHeader">
<div v-for="(item,index) in topStyle" :key="index" :class="[styleClass(topStyle,item.content)]" v-show="item.checked=='1'" :ref="item.content" @click="select(topStyle,item.content)">{{printStyleObj[item.content]}} </div>
</div>
也就是说class中可以写函数，然后返回字符串作为类名。
//判断是否上方有空行
emptyLineStyle(styleArr,params){
if(styleArr[this.styleIndex(styleArr,params)].emptyLine=='0') {
return ' '
}else{
return ' emptyLine'
}
},
//样式变化的函数整合
styleClass(styleArr,params){
let classStr=" "
classStr=classStr.concat(this.fontStyle(styleArr,params))
classStr=classStr.concat(this.selected(styleArr,params))
classStr=classStr.concat(this.dividingLineStyle(styleArr,params))
classStr=classStr.concat(this.emptyLineStyle(styleArr,params))
return classStr
}