v-model簡介

之前數據綁定都是單向綁定，數據影響了視圖渲染，但是反過來就不行（視圖的變化不會影響模型數據）,而對于表單中的控件而言，我們需要數據的綁定是雙向的，即：模型數據的變化會影響視圖，同時視圖發生變化也會同步到模型數據。

接下來學習的v-model是雙向綁定，視圖（View）和模型（Model）之間會互相影響。既然是雙向綁定，一定是在視圖中可以修改數據的組件，這樣就限定了視圖的元素類型。

目前v-model的可使用元素有：

input????????radio????????checkbox????????select????????textarea????????components（Vue中的自定義組件）

基本上除了最后一項，其它都是表單的輸入項。 首先我們先看一個簡單的示例：

<div id="app"><form action="">姓名: <input type="text" name="name" v-model="person.name"> <br>性別: <input type="radio" name="sex" value="1" v-model="person.sex"> 男<input type="radio" name="sex" value="0" v-model="person.sex"> 女 <br>愛好：<input type="checkbox" name="favorites" value="0" v-model="person.favorites"> 唱<input type="checkbox" name="favorites" value="1" v-model="person.favorites"> 跳<input type="checkbox" name="favorites" value="2" v-model="person.favorites"> Rap<input type="checkbox" name="favorites" value="3" v-model="person.favorites"> 打籃球 <br>學歷：<select name="education" v-model="person.education"><option value="0">小學</option><option value="1">中學</option><option value="2">大學</option><option value="3">Java練習生</option> </select> <br>個性簽名： <textarea name="signature" v-model="person.signature" cols="30" rows="10"></textarea> <br><input type="submit" value="提交"></form><hr><button @click="updatePerson">點我修改person改變表單</button><button @click="getPerson">點我獲取表單同步后的person</button> </div> <script>const vm = new Vue({el:"#app",data:{person:{}},methods:{updatePerson(){this.person = {name:"xiaohei",sex:1,favorites:[0,1,2,3],education:3,signature:"小黑不是一般的黑"};},getPerson(){console.log(this.person);}}}) </script>

• input 和 textarea 默認對應是字符串

• radio對應的input的value值是預先定義好的，model中對應的值匹配哪個就選中哪個

• 多個 checkbox 對應的類型是一個數組

• select 根據option子元素的value屬性進行匹配選擇

實戰案例

?

<div id="app"><form action="" @submit.prevent="addNewTodo">Add a todo<input type="text" v-model="newTodoText"><button type="submit">Add</button></form><ul v-if="todos.length > 0"><li v-for="(todo,index) in todos">{{todo}} <button @click="removeTodo(index)">Remove</button></li></ul><h4 v-else>當前沒有待辦事項</h4></div><script>const vm = new Vue({el:"#app",data:{newTodoText:"",todos:[]},methods:{addNewTodo(){if(this.newTodoText.trim().length > 0){this.todos.push(this.newTodoText);this.newTodoText="";}},removeTodo(index){//從指定下標開始，刪除1個元素this.todos.splice(index,1);}}})</script>

總結

以上是生活随笔為你收集整理的Vue第一部分(4)：表单的双向数据绑定：v-model指令的全部內容，希望文章能夠幫你解決所遇到的問題。

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