vue 雙向繫結

問題：用:只能進行單向繫結(model(data) -> view(html))

如果用:繫結表單元素的值，則使用者修改表單元素的內容，無法自動修改data中的模型變數。意味著vue中永遠拿不到使用者在介面中修改的新值。

解決：今後凡是繫結(可輸入，可選擇的)表單元素，必須用雙向繫結，才能在介面修改時，自動更新data中的資料。

雙向繫結：既能(model(data) -> view(html))，data中變化，頁面自動跟隨變化。

又能view(html) -> model(data)，頁面中變化，data中的變數自動跟隨變化。

如何使用雙向繫結：v-model~~:value~~ =「變數」

簡寫：因為幾乎所有表單元素都用value屬性控制元素的內容或值，所以，幾乎所有v-model都繫結value屬性，所以可簡寫為:v-model="變數"

例:
>
"kwords"
>
"search"
/button>
<
/div>
var vm =
newvue(,
methods:
相關的內容...`)}
繫結時：用data中***的值和每個radio的提前寫死的value值做比較，如果哪個radio的value值剛好等於data中***的值就選中，其餘不選中
修改時：用當前選中的radio的寫死的value,反向賦值回data中的***上
例：

"radio" name=

"***" v-model=

"***" value=

"1">男

"radio" name=

"***" v-model=

"***" value=

"0">女

/h1>

/div>

data:

例：

>
="tac"
>
"`../img/$`" alt=
"">
<
/div>
="tac"
>
for=
"p of planes"
>
"radio" v-model=
"chosen" name=
"plane"
:value=
"p">
"`../img/$`"
>
<
/label>
<
/div>
<
/div>
data:
特殊：每個option的value都是提前寫死的，變得只是option的selected屬性，變的只是選中的option是哪個。
例如："city"

其實：v-model=「city」其實僅僅起到乙個繫結連線的作用，不具體繫結某乙個屬性值。

繫結時：用data中city變數的值和每個option中的寫死的value做比較。如果data中city變數的值等於option中寫死的value的值，則當前option就選中。其餘option就不選中。

修改時：用當前選中項的寫死的value，反向更新回data中的city中的變數

原理：v-model="city"其實，不具體繫結修改元素某個屬性的值。而是為元素新增修改事件，比如onchange,oninput等。在事件處理函式中修改new vue物件中的模型變數的值。進一步觸發模型變數的set方法，觸發通知，引起其他使用該變數的元素的狀態的改變。

例：
>北京<
>杭州<
>上海<
/option>
<
/select>
>
"`../img/$`" alt=
"">
<
/div>
data:
單選時，變化的只是checked屬性。
何時：如果希望用checkbox控制乙個bool型別的變數值時。
如何：
"checkbox" v-model=
"isagree"
>同意
data:

繫結時：根據isagree的值，決定checkbox的checked狀態

修改時：用當前checkbox的checked狀態，更新data中的isagree

onchange

=function()

例：

姓名："!isagree"

密碼："!isagree"

"checkbox" v-model=

"isagree"

>同意

"!isagree"

>註冊<

/button>

/div>

data:

何時：只要希望邊修改邊實時執行操作時：

如何：

data:

watch:

)}只要通過斜體手段修改一次kwords變數的值，都會立刻觸發一次kwords()函式，執行一次操作。

例：
>
"kwords" @keyup.13=
"search"
>
"search"
/button>
<
/div>
data:
,methods:
相關的內容...`)}
},watch:
}

vue 雙向繫結

Vue雙向繫結

Vue 雙向繫結

Vue 雙向繫結

vue 雙向繫結

Vue雙向繫結

Vue 雙向繫結

Vue 雙向繫結

相關推薦