Vue第一部分(4)：表单的双向数据绑定：v-model指令

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>