<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=adge">
<title>Document</title>
<script src="vue.js"></script>
<style>
.red{
color:pink;
}
.italic{
font-style:italic;
}
.thin{
font-weight:200;
}
.small{
font-size:14px;
}
</style>
</head>
<body>
<div id="app">
<p>在Vue中，使用v-bind 为元素绑定数组的类样式</p>
<h1 :class="['red','small']">这是一个大大的H1，我骄傲！</h1>
<h1 :class="['italic','thin']">这是一个大大的H1，我骄傲！</h1>
<hr>
<p>在数组中使用三元运算符</p>
<input type="button" @click="isthin=true" value="变瘦">
<h1 :class="['italic',isthin?'thin':'']">这里样式通过data来判断</h1>
<hr>
<p>在数组中使用对象形式，简化三元表达式</p>
<input type="button" @click="isthin=true" value="变瘦">
<h1 :class="['italic',{thin:isthin}]">这里样式通过data来判断</h1>
<hr>
<p>传递对象作为类样式</p>
<input type="button" @click="isthin=true" value="变瘦">
<h1 :class="{thin:true,italic:true,red:true,small:isthin}">这里样式通过data来判断</h1>
</div>
</body>
<script>
//创建Vue实例，得到ViewModel
var vm=new Vue({
el:"#app",
data:{
isthin:false
},
methods:{}
});
</script>
</html>
