v-model

剛才的v-text和v-html可以看做是單向綁定，數據影響了視圖渲染，但是反過來就不行。接下來學習的v-model是雙向綁定，視圖（View）和模型（Model）之間會互相影響。

既然是雙向綁定，一定是在視圖中可以修改數據，這樣就限定了視圖的元素類型。目前v-model的可使用元素有：

• input

• select

• textarea

• checkbox

• radio

• components（Vue中的自定義組件）

基本上除了最后一項，其它都是表單的輸入項。

舉例：

html：

<div id="app"><input type="checkbox" v-model="language" value="Java" />Java<br/><input type="checkbox" v-model="language" value="PHP" />PHP<br/><input type="checkbox" v-model="language" value="Swift" />Swift<br/><h1>你選擇了：{{language.join(',')}}</h1> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript">var vm = new Vue({el:"#app",data:{language: []}}) </script>

• 多個CheckBox對應一個model時，model的類型是一個數組，單個checkbox值默認是boolean類型

• radio對應的值是input的value值

• text 和textarea 默認對應的model是字符串

• select單選對應字符串，多選對應也是數組

效果：

?

總結

以上是生活随笔為你收集整理的v-model的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。