v-model 双向数据绑定

通过v-model指令可以实现双向数据绑定

HTML部分：

     <div id="app">
         <input type="text" v-model="textVal" :value="textVal">
         <p>文本内容：{{ textVal }}</p>
         <div>
             <label for="">男
                 <input type="radio" name="gender" v-model="radioVal" value="male">
             </label>
             <label for="">女
                 <input type="radio" name="gender" v-model="radioVal" value="female">
             </label>
             <p>单选框：{{ radioVal }}</p>
         </div>

         <div>
             <label for="">狗
                 <input type="checkbox" name="animal" v-model="checkboxVal" value="dog">
             </label>
             <label for="">猫
                 <input type="checkbox" name="animal" v-model="checkboxVal" value="cat">
             </label>
             <label for="">猴子
                 <input type="checkbox" name="animal" v-model="checkboxVal" value="monkey">
             </label>
             <label for="">猪
                 <input type="checkbox" name="animal" v-model="checkboxVal" value="pig">
             </label>
             <p>复选框：{{ checkboxVal }}</p>
         </div>

         <select name="" id="" v-model="selectVal">
             <option value="BJ">北京</option>
             <option value="SH">上海</option>
             <option value="SZ">深圳</option>
             <option value="JX">江西</option>
         </select>
         <p>单选下拉框：{{ selectVal }}</p>

         <select name="" id="" v-model="mulSelectVal" multiple>
                 <option value="apple">苹果</option>
                 <option value="orange">橙子</option>
                 <option value="bananer">香蕉</option>
             </select>

         <p>复选下拉框：{{ mulSelectVal }}</p>
     </div>

JS部分：

     var app = new Vue({
             el: "#app",
             data() {
                 return {
                     textVal: "这是一段文字。。。",
                     radioVal: "",
                     checkboxVal: [],
                     selectVal: "",
                     mulSelectVal: []
                 }

             }
         });

初始化页面：

当修改元素的值时，下面的p标签内容也会随着改变。