1.绑定class
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>学习example</title>
<script src="../static/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<!-- 操作元素的class列表和内联样式是数据绑定的一个常见需求。
因为它们都是attribute，所以可以用v-bind处理它们：只需要通过表达式计算出字符串结果即可。
不过，字符串拼接麻烦且易错。因此，在将v-bind用于class和style时，Vue.js做了专门的增强。
表达式结果的类型除了字符串之外，还可以是对象或数组。-->
<!-- 可以传给 v-bind:class 一个对象，以动态地切换 class-->
<!-- active 这个 class 存在与否将取决于数据 property isActive 的值-->
<!-- 可以在对象中传入更多字段来动态切换多个 class。此外，v-bind:class 指令也可以与普通的 class attribute 共存。-->
<div
class="test"
v-bind:class="{active:isActive,green:isGreen}"
style="200px;height:200px;text-align:center;line-height:200px;">
hi vue
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
isActive: true,
isGreen: true,
},
});
</script>
<style type="text/css">
.test {
font-size: 30px;
}
.green {
color: #00FF00;
}
.active {
background: #FF0000;
}
</style>
</body>
</html>
2.数组语法
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>学习example</title>
<script src="../static/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<!-- 把一个数组传给 v-bind:class，以应用一个 class 列表-->
<div
class="test"
v-bind:class="['active','green']"
style="200px;height:200px;text-align:center;line-height:200px;">
hi vue
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {},
});
</script>
<style type="text/css">
.test {
font-size: 30px;
}
.green {
color: #00FF00;
}
.active {
background: #FF0000;
}
</style>
</body>
</html>
3.三目运算符
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>学习example</title>
<script src="../static/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div
class="test"
v-bind:class="[isActive?'active':'',isGreen?'green':'']"
style="200px;height:200px;text-align:center;line-height:200px;">
hi vue
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
isActive: true,
isGreen: false,
},
});
</script>
<style type="text/css">
.test {
font-size: 30px;
}
.green {
color: #00FF00;
}
.active {
background: #FF0000;
}
</style>
</body>
</html>
4.绑定内联样式
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>学习example</title>
<script src="../static/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div :style="{color:color,fontSize:size,background:isRed?'#FF0000':''}">
hi vue
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
color: "#FFFFFF",
size: '50px',
isRed: true,
},
});
</script>
</body>
</html>