参考:《Vue.js实战》梁灏
1. 绑定class的几种方式
1.1 对象语法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-bind绑定Class之对象语法</title>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div :class="{'active':isActive}"></div>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
isActive:true
}
});
</script>
</body>
</html>
上面示例中,类名active依赖于数据isActive,当其为true时,div会拥有该类名,否则没有,对象中可以传入多个属性,以进行动态切换,且:class
与普通class
可以共存:
.<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绑定多个属性及与class共存</title>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div class="static" :class="{'active':isActive,'error':isError}"></div>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
isActive:true,
isError:true
}
});
</script>
</body>
</html>
当:class的表达式过长或逻辑复杂时,可以考虑使用计算属性:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用计算属性绑定class</title>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div :class="classes"></div>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
isActive:true,
// error:null,
error:{
type:'fail'
}
},
computed:{
classes:function(){
return {
active:this.isActive && !this.error,
'text-fail':this.error && this.error.type === 'fail'
}
}
}
});
</script>
</body>
</html>
1.2 数组语法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-bind数组语法</title>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div :class="[activeCls,errorCls]"></div>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
activeCls:'active',
errorCls:'error'
}
});
</script>
</body>
</html>
也可以使用三元运算符根据条件切换class:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-bind三元运算符绑定数组class</title>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div :class="[isActive? activeCls:'',errorCls]"></div>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
isActive:true,
activeCls:'active',
errorCls:'error'
}
});
</script>
</body>
</html>
class有多个条件时,这样写较为麻烦,可以在数组语法中使用对象语法:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-bin在数组中使用对象语法绑定class</title>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div :class="[{'active':isActive},errorCls]"></div>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
isActive:true,
errorCls:'error'
}
});
</script>
</body>
</html>
当然,与对象语法一样,也可以使用data、computed和methods三种方法,以计算属性为例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计算属性绑定</title>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<button type="button" :class="classes">这是个按钮</button>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
size:'large',
disabled:true
},
computed:{
classes:function(){
return [
'btn',
{
['btn-'+this.size]:this.size !=='',
['btn-disabled']:this.disabled
}
]
}
}
});
</script>
</body>
</html>
1.3 在组件上使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>在组件上使用v-bind</title>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<my-component :class="{'active':isActive}"></my-component>
</div>
<script type="text/javascript">
Vue.component('my-component',{
template:"<p class='article'>一些文本</p>"
})
var app = new Vue({
el:"#app",
data:{
isActive:true
}
});
</script>
</body>
</html>
2 绑定内联样式(不常用)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绑定内联样式</title>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<!-- 直接写css -->
<div :style="{'color':color,'fontSize':fontSize + 'px'}">文本</div>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
color:'red',
fontSize:14
}
});
</script>
<!-- 第二种,写在data里-->
<div id="app2">
<div :style="styles">文本2</div>
</div>
<script type="text/javascript">
var app2 = new Vue({
el:"#app2",
data:{
styles:{
color:'red',
fontSize:18+'px'
}
}
});
</script>
<!-- 第三种,写在computed里 -->
<div id="app4">
<div :style="styles2">文本3</div>
</div>
<script type="text/javascript">
var app3 = new Vue({
el:"#app4",
data:{
color:'red',
fontSize:28
},
computed:{
styles2:function(){
return{
'color':this.color,
'font-size':this.fontSize+"px",};
}
}
});
</script>
</body>
</html>
应用多个样式时,可以使用数组语法:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>多个样式-数组绑定</title>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div :style="[styleA,styleB]">示例文本</div>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
},
computed:{
styleA:()=>{
return {"color":'red'};
},
styleB:()=>{
return {"fontSize":'30px'};
}
}
});
</script>
</body>
</html>
使用style
时,Vue.js会自动给特殊的CSS属性名称增加前缀,如transform。
Done!