關於Vue值繫結的問題(靜態和動態)

2021-10-03 21:21:05 字數 1007 閱讀 5403

對於單選按鈕,核取方塊及選擇框的選項,v-model 繫結的值通常是靜態字串 (對於核取方塊也可以是布林值):

<

!-- 當選中時,`picked`

為字串 "a"

-->

"radio" v-model=

"picked" value=

"a">

"checkbox" v-model=

"toggle"

>

<

!-- 當選中第乙個選項時,`selected`

為字串 "abc"

-->

"selected"

>

"abc"

>

abc<

/option>

<

/select>

但是有時我們可能想把值繫結到 vue 例項的乙個動態屬性上,這時可以用 v-bind 實現,並且這個屬性的值可以不是字串。

//簡單的說就是你選中了那麼toggle就是yes,沒選中就是no

"checkbox" v-model=

"toggle"

true

-value=

"yes"

false

-value=

"no"

>

"radio" v-model=

"pick" v-bind:value=

"a">

"selected"

>

<

!-- 內聯物件字面量 --

>

"">

123<

/option>

<

/select>

// 當選中時

typeof vm.selected // => 'object'

vm.selected.number // => 123

vue 單相繫結 Vue的單向繫結和雙向繫結

1 單向繫結 單向資料繫結的實現思路 所有資料只有乙份 一旦資料變化,就去更新頁面 只有data dom,沒有dom data 若使用者在頁面上做了更新,就手動收集 雙向繫結是自動收集 合併到原有的資料中。單項繫結 如下 html 2 雙向繫結 資料的雙向繫結是vue實現的一大功能。使用v mode...

關於Vue雙向繫結的測試

box floatl clear msg中間值 msg新值 list中間值 list新值 obj中間值 id obj新值 id array中間值 array新值 父元件msg 父元件list 父元件obj id 父元件array 父元件 var vm new vue parentobj parent...

vue 單相繫結 Vue的雙向繫結和單向資料流

五一假期在家補了課,看到雙向繫結與單向資料流的概念。瓦特,我之前以為vue的v model就是雙向資料流,其實不然,下面讓我仔細來看看 雙向繫結 簡而言之,雙向繫結就是model的更新會觸發view的更新,view的更新會觸發model的更新,它們的作用是相互的 上傳失敗.image 81a06f ...