VUE課程參考 5 屬性繫結v bind

2022-03-06 05:24:04 字數 1950 閱讀 3331

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 + ': 這是拼接的內容'"

>}

p>

div>

<

script

src="../js/vue.js"

>

script

>

<

script

>

let vm

=new

vue(

});script

>

v-bind: 指令可以被簡寫為 :要繫結的屬性

<

div

id>

<

p v-bind:title

="mytitle"

>}

p>

<

p v-bind:title

="mytitle + ': 這是拼接的內容'"

>}

p>

<

p :title

="mytitle + ': 這是拼接的內容'"

>}

p>

div>

<

script

src="../js/vue.js"

>

script

>

<

script

>

let vm

=new

vue(

});script

>

1

doctype html

>

2<

html

lang

="en"

>

3<

head

>

4<

meta

charset

="utf-8"

>

5<

title

>屬性繫結v-bind

title

>

6head

>

7<

body

>819

<

div

id>

2021

22<

p v-bind:title

="mytitle"

>}

p>

2324

<

p v-bind:title

="mytitle + ': 這是拼接的內容'"

>}

p>

2526

<

p :title

="mytitle + ': 這是拼接的內容'"

>}

p>

27div

>

28<

script

src="../js/vue.js"

>

script

>

29<

script

>

30let vm

=new

vue(

36});

37//

console.log(vm);

38script

>

39body

>

40html

>

Vue繫結class與繫結內聯樣式 v bind

為v bind class設定乙個物件,可以動態切換class class div div script newvue script body 當 class的表示式過長或邏輯複雜時,還可以繫結乙個計算屬性 class classes div div script newvue computed s...

VUE課程 8 屬性繫結v bind

v bind是vue中繫結屬性的指令,可以將標籤裡面的屬性繫結vue裡面的資料,v bind 指令可以被簡寫為 要繫結的屬性 div id p v bind title mytitle p p title mytitle aaaaa p a href myhref 讓學過的東西不再忘記 a div ...

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 c...