VUE課程參考 11 class類繫結

vue中繫結class有陣列語法和物件語法，陣列語法的時候會依次將陣列裡面的元素解析到class裡面，物件語法就是將鍵值對中的值為true的鍵新增到class中

<

div 
id>
<
p :class
="['red','big']"
>}
p>
<
p :class
="['red',isbig?'big':'']"
>}
p>
<
p :class
="['italic',]"
>}
p>
<
p :class
="['italic',class1]"
>}
p>
<
p :class
="">}
p>
<
p :class
="class1"
>}
p>
div>
<
script 
src="../js/vue.js"
>
script
>
<
script
>
let vm 
=new
vue(
}});
script
>

：會依次將'red'和'big'解析到class裡面

物件語法：}

：鍵值對的值為true，則將對應的屬性名新增到class，為false則不新增a、陣列裡面可以寫三元表示式：}

b、陣列裡面可以放物件：}

陣列語法：}

：會依次將'red'和'big'解析到class裡面物件語法：}

：鍵值對的值為true，則將對應的屬性名新增到class，為false則不新增a、陣列裡面可以寫三元表示式：}

b、陣列裡面可以放物件：}

1、無論是陣列還是物件，元素有引號就當做字串解析，沒帶引號的就當做變數（js表示式）解析

2、物件的鍵值對中的鍵一般不用帶引號，但是如果鍵中有短號（例如big-ab），則需要帶引號

1

doctype html
>
2<
html 
lang
="en"
>
3<
head
>
4<
meta 
charset
="utf-8"
>
5<
title
>11、class類繫結
VUE課程參考 2 VUE基本使用
1 引入vue.js 3 在模板中使用資料 1 引入vue.js script src script 2 建立vue物件 el 指定根element 選擇器 data 初始化資料 頁面可以訪問 data 3 在模板中使用資料 模板語法 雙大括號 div id div v model指令 第乙個m是m...
VUE課程參考 13 迴圈指令v for
vue中迴圈指令v for可以迴圈陣列 v for item in list 迴圈物件 v for val,key in obj 迴圈數字 v for count in 10 1 v for迴圈陣列 2 v for迴圈物件 val key 3 v for迴圈數字 1 v for迴圈陣列 2 v fo...
VUE課程參考 5 屬性繫結v bind
v bind是vue中繫結屬性的指令，v bind中可以寫合法的js表示式，v bind 指令可以被簡寫為 要繫結的屬性 div id p v bind title mytitle p p v bind title mytitle 這是拼接的內容 p p title mytitle 這是拼接的內容 ...