1、class樣式
<!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=edge">
<title>Document</title>
<style>
.red {
color: red;
}
.thin {
font-weight: 200;
}
.italic {
font-style: italic;
}
.active {
/* 間距 */
letter-spacing: 0.5em;
}
</style>
</head>
</body>
<div id="app">
<!--
red is not defined
:會去找vm中的變量
-->
<!-- <h1 :class="red">1這是一個h1</h1> -->
<!--
1、
vue綁定class的時候，需要用字符串的形式
-->
<!-- <h1 :class="['red','thin']">2這是一個h1</h1> -->
<!--
2、
vue綁定多個class的時候，需要用字符串、數組的形式
並且可以使用三元表達式
-->
<!-- <h1 :class="['red','thin',flag?'active':'']">2這是一個h1</h1> -->
<!--
3、
數組中使用對象{鍵：值}，代替三元表達式，提高可讀性
-->
<!-- <h1 :class="['red','thin', {'active':flag} ]">2這是一個h1</h1> -->
<!--
4、
在class使用v-bind綁定對象的時候，對象的屬性是類名，由於對象的屬性可帶可不帶引號，
此處沒帶，屬性的值是一個標識符，true爲顯示，false爲不顯示
-->
<h1 :class="{red:true,thin:true, active:true}">2這是一個h1</h1>
<!--將clas屬性在vm中聲明一下，在class綁定即可-->
<h3 :class="classObj">這是一個h1</h3>
</div>
<body>
<script src="./lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
flag: true,
classObj: { red: true, thin: true, active: true, italic: true }
},
methods: {}
});
</script>
</html>
2、內聯樣式
<!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=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!--對象就是無序的鍵值對集合-->
<h1 :style="styleObj">這事一個H1</h1>
<h1 :style="[styleObj,styleObj1]">這事一個H1</h1>
</div>
</body>
<script src="./lib/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
styleObj:{color:'red','font-weight':200},
styleObj1:{'font-style':'italic'}
},
methods: {
}
});
</script>
</html>