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标签内容也会随着改变。