09.表单数据绑定(双向数据绑定)（重点）

一、表单数据绑定(双向数据绑定)（重点）

v-model的值是，vue接收表单元素的值的变量名， 即v1的值就是用户填写的内容

(甚至可以在data中设置v1的值，从而设置表单元素的默认值)

 ```html

<input type="text" v-model="v1">

<div>{{v1}}</div>

 ```

具体代码：

```html

    <div id="app">

        <input type="text" v-model="txt1">  <!-- v-model表示了用户输入的这个数据-->

        <p>{{ txt1 }}</p>

        <select v-model="sel1">

            <option value="0">北京</option>

            <option value="1">上海</option>

            <option value="2">广州</option>

        </select>

    </div>

    <script>

        var vm = new Vue({

            el:"#app",

            data:{

                //通过改变txt1或者sel1，来使对应的表单元素的v-model的值发生了变化，所以这个表单元素的value就变化了(v-model看成我们之前将的value)

                txt1: '默认值',

                sel1: 0

            }

        })

    </script>

```