如何用 vue 綁定單或多個 class 名

一、用 變數形式 綁定單個 Class 名

在vue中綁定單個class名還好說，直接寫就可以了

<template> <div id="app"> <!-- 因為是自定義屬性，所以要用到 v-bind ，簡寫為 : --> <!-- 3.將 box 綁定給 div --> <div :class="box"></div> </div> </template> <script> export default {

name: app,

data () {

return {

// 2.在 data 中把 yellow 賦給 box

box: yellow

}

}

}

</script> <style> /* 1.在樣式表中寫好樣式 */ .yellow{

width: 200px;

height: 200px;

background: #ff0;

}

</style>

二、用 數組形式 綁定多個 Class 名

比如像再給這個div加個陰影

在 style 中寫好樣式

.shadow{

box-shadow: 10px 10px 5px 0 #999;

}

在 data 中繼續添加數據對象

<script> export default {

name: app,

data () {

return {

box: yellow,

shadow:shadow

}

}

}

</script>

在標籤中以數組的形式綁定 Class 名

<template> <div id="app"> <div :class="[box,shadow]"></div> </div> </template>就好了。

三、用 json 形式 綁定多個 Class 名

該方法方便用於當同時添加多個 Class 名時，在某種情況下判斷顯示哪種樣式

先寫好樣式

<style> .yellow{

width: 200px;

height: 200px;

background: #ff0;

}

.shadow{

box-shadow: 10px 10px 5px 0 #999;

}

</style>

在 data 中添加數字對象，用來做判斷

<script> export default {

name: app,

data () {

return {

show1:true,

show2:false

}

}

}

</script>

以 json 的形式綁定到 class 中，通過布爾值改變 show1 與 show2 的值，來控制 div 的狀態

<template> <div id="app"> <div :class="{yellow:show1,shadow:show2}"></div> </div> </template>

推薦閱讀：