1. class样式绑定处理
1.1. 对象语法
<div v-bind:class="{active: isActive}"></div>
1.2. 数组语法
<div v-bind:class="[active1Class, active2Class]"></div>
2. class样式绑定-对象形式
2.1. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>class样式绑定-对象形式</title>
<style type="text/css">
.import {
width: 400px;
height: 50px;
border: solid 1px;
display: block;
}
.title {
font-weight: bold;
color: red;
}
/*默认类*/
.base {
font-size: 24px;
}
</style>
</head>
<body>
<div id="app">
<div>
<span class="base" v-bind:class="{import: isImport, title: isTitle}">对象绑定class</span><br />
<button @click="handle">切换样式</button>
</div>
</div>
<script type="text/javascript" src="vue.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
isImport: true,
isTitle: true
},
methods: {
handle: function(event) {
this.isImport = false;
}
}
});
</script>
</body>
</html>
2.2. 效果图
2.3. 点击切换样式按钮
3. class样式绑定-数组形式
3.1. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>class样式绑定-数组形式</title>
<style type="text/css">
.import {
width: 400px;
height: 50px;
border: solid 1px;
display: block;
}
.title {
font-weight: bold;
color: red;
}
/*默认类*/
.base {
font-size: 24px;
}
</style>
</head>
<body>
<div id="app">
<div>
<span class="base" v-bind:class="[importClass, titleClass]">数组绑定class</span><br />
<button @click="handle">切换样式</button>
</div>
</div>
<script type="text/javascript" src="vue.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
importClass: "import",
titleClass: "title"
},
methods: {
handle: function(event) {
this.titleClass = "";
}
}
});
</script>
</body>
</html>
3.2. 效果图
3.3. 点击切换样式按钮
4. class样式绑定-对象和数组结合形式
4.1. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>class样式绑定-对象和数组结合形式</title>
<style type="text/css">
.import {
width: 400px;
height: 50px;
border: solid 1px;
display: block;
}
.title {
font-weight: bold;
color: red;
}
/*默认类*/
.base {
font-size: 24px;
}
</style>
</head>
<body>
<div id="app">
<div>
<span class="base" v-bind:class="[importClass, {title: isTitle}]">对象和数组结合使用绑定class</span><br />
<button @click="handle">切换样式</button>
</div>
</div>
<script type="text/javascript" src="vue.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
isTitle: true,
importClass: "import"
},
methods: {
handle: function(event) {
this.importClass = "";
this.isTitle = false;
}
}
});
</script>
</body>
</html>
4.2. 效果图
4.3. 点击切换样式按钮
5. class样式绑定-简化写法
5.1. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>class样式绑定-简化写法</title>
<style type="text/css">
.import {
width: 400px;
height: 50px;
border: solid 1px;
display: block;
}
.title {
font-weight: bold;
color: red;
}
/*默认类*/
.base {
font-size: 24px;
}
</style>
</head>
<body>
<div id="app">
<div>
<span class="base" v-bind:class="objClasses">对象简化绑定class</span><br />
<button @click="handle1">切换样式</button>
</div>
<br />
<div>
<span class="base" v-bind:class="arrClasses">数组简化绑定class</span><br />
<button @click="handle2">切换样式</button>
</div>
</div>
<script type="text/javascript" src="vue.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
objClasses: {import: true, title: true},
arrClasses: ["import", "title"]
},
methods: {
handle1: function(event) {
this.objClasses.import = false;
this.objClasses.title = false;
},
handle2: function(event) {
this.arrClasses.splice(0, this.arrClasses.length);
}
}
});
</script>
</body>
</html>
5.2. 效果图
5.3. 点击2个切换样式按钮