因為v-bind可以直接實現(xiàn) 標(biāo)簽屬性的值動態(tài)化，那么Class作為一個屬性，那么：
?
<style>
????????.active{
????????????color:red;
????????}
????</style>
<script?src="js/vue.js"></script>
????<div?id="app">
????????<h2?:class="active">不忘初心?，?方得始終?。</h2>
????</div>
<script?>
????const?app?=?new?Vue({
????????el:"#app",
????????data:{
????????????active:"active"
????????}
????})
</script>
?
如果我這樣寫的話 你可能會罵我 畫蛇添足 多此一舉 *****? s*****b*****當(dāng)然 這是對的，但是他有一種另外形式來展現(xiàn)：
就是 Class屬性? + v-bind 可以用 對象語法來寫，對象語法 當(dāng)然是一個{} ,里面是 鍵 - 值 ，值是boolean型的? 如果是 true 的才會把值添加進去。
例：
<style>
????????.red{
????????????color:red;
????????}
????????.blue{
????????????color:?blue;
????????}
????</style>
</head>
<body>
<script?src="js/vue.js"></script>
????<div?id="app">
????????<!--?<h2?class="blue">不忘初心?，?方得始終?。</h2>?-->
????????<h2?:class="{red:false,blue:true}">不忘初心?，?方得始終?。</h2>
????</div>
<script?>
????const?app?=?new?Vue({
????????el:"#app",
????????data:{
????????????red:"red",
????????????blue:"blue",
????????}
????})
</script>
?
上面的true 和 false 完全可以用變量代替 ，那么進階的寫法就應(yīng)該這樣寫 【我們配個方法 然后實現(xiàn) 點擊按鈕變紅色 再次點擊變藍色】：
<style>
????????.red{
????????????color:red;
????????}
????????.blue{
????????????color:?blue;
????????}
????</style>
<script?src="js/vue.js"></script>
????<div?id="app">
????????<!--?<h2?class="blue">不忘初心?，?方得始終?。</h2>?-->
????????<h2?:class="{red:boolean,blue:!boolean}">不忘初心?，?方得始終?。</h2>
????????<button?@click="not">切換顏色</button>
????</div>
<script?>
????const?app?=?new?Vue({
????????el:"#app",
????????data:{
????????????red:"red",
????????????blue:"blue",
????????????boolean:true
????????},
????????methods:{
????????????not:function?(){
????????????????this.boolean?=?!this.boolean;
????????????}
????????}
????})
</script>
?
所以 非常的方便啊，
?
還有一個特點：
如果你有多個Class 其中有一個是v-bind綁定的 那么它們兩個Class會合并起來 并不會吧 v-bind綁定的class 覆蓋掉,例如：
<script?src="js/vue.js"></script>
????<div?id="app">
<!--????????<h2?class="h2?red">不忘初心?，?方得始終?。</h2>-->
????????<h2?class="h2"?:class="red">不忘初心?，?方得始終?。</h2>
????</div>
<script?>
????const?app?=?new?Vue({
????????el:"#app",
????????data:{
????????????red:"red"
????????}
????})
</script>
?
?
還有就是 如果你覺得 直接寫對象語法太長的話? 你就直接定義一個方法，然后寫進去即可，v-bind也會自動解析這個函數(shù)的? ，函數(shù)中直接寫 return {xxxx:teue,xxxx:false} 即可??
例：
<style>
????????.red{
????????????color:red;
????????}
????????.blue{
????????????color:?blue;
????????}
????</style>
</head>
<body>
<script?src="js/vue.js"></script>
????<div?id="app">
<!--???記得加括號?因為這是調(diào)用函數(shù)?不是事件調(diào)用的.?????-->
????????<h2?:class="classs()">不忘初心?，?方得始終?。</h2>
????</div>
<script?>
????const?app?=?new?Vue({
????????el:"#app",
????????data:{
????????????red:"red"
????????},
????????methods:{
????????????classs:function?(){
????????????????return?{red:true,blue:false};
????????????}
????????}
????})
</script>
?
?
?
，還有個數(shù)組語法 下一篇寫
?
作者：??咸瑜???
APP 