v-bind 繫結class 和 style 的幾種方法
阿新 • • 發佈：2018-12-12
v-bind 繫結class
一、物件語法：
1. 資料屬性物件語法：
<style> <!--新建一個active 的class--> .active{color:red} </style> <!--v-bind 繫結 active:isActive--> <div id="div" v-bind:class="{active:isActive}">good good study </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!--引入vue js 外部檔案--> <script> var classV=new Vue({ el:"#div", data:{ isActive:true, //此時的isActive 屬性值為 true unActive:false} }) </script>
var classV=new Vue({ el:"#div", data:{isActive:true, unActive:false} })
<div id="div" v-bind:class="{active:isActive}">good good study </div>
例子說明：
div 元素綁定了 active 這個class，此時 isActive 的資料屬性值為 true
格式：v-bind:class="{active:isActive}"
在控制檯，輸入classV.isActive=false，手動修改isActive 的屬性值為 false
此時， div 元素的class 為空。div不顯示樣式
2. 計算屬性語法：
<style> <!--新建兩個class。一個active 和 一個 offical--> .active{ color:red} .offical{ font-family:Georgia, "Times New Roman", Times, serif; font-size:36px;} </style> <body> <!--給div 元素繫結一個computed 物件 activeClass--> <!--格式：v-bind:class="activeClass"--> <div id="div" v-bind:class="activeClass">good good study </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!--引入vue js 外部檔案--> <script> 裡 var classV=new Vue({ el:"#div", data:{ isActive:true, unActive:false}, computed:{ activeClass:function(){ return { active:this.isActive, offical:this.isActive} } } }) </script>
建立一個計算屬性 activeClass
computed:{activeClass:function(){ return { active:this.isActive, offical:this.isActive}
} }
給div 元素繫結計算屬性物件 activeClass
格式為： v-bind:class="activeClass"
二、陣列語法：
<style>
<!--新建兩個class。一個active 和 一個 offical-->
.active{
color:yellow;
background:#000000}
.offical{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:36px;}
</style>
<body>
<!--給div 元素繫結一個數組物件 activeClass-->
<!--格式：v-bind:class="[activeClass,officeClass]"-->
<div id="div" v-bind:class="[activeClass,officeClass]">good good study </div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!--引入vue js 外部檔案-->
<script> /
var classV=new Vue({
el:"#div",
data:{
activeClass:"active",
officeClass:"offical"}
})
</script>