初识Vue(6)——v-model

v-model详解

作用：在vue中用于表单的双向绑定。

下面是v-model一个简单的例子

<div id="app">
    <label for="">
        <input type="text" value="" v-model="message">
    </label>
    <h1>{{message}}</h1></div>
</body>

<script>
    const app = new Vue({
        el:'#app',
        data:{
            message:"hi"
        }
    })
</script>

v-model指令实现了data里面的message和input框的实时双向绑定，任何一个发生变化，另一个也会变化，并且网页也会立刻重新解析渲染。

原理：v-model指令的双向绑定可以粗略解析为2步。

1：表单里面的值value是来自data里面的message值。
2：data里的message值是来自表单里面的value值。
分别分析步骤1和步骤2，可以想到
1：v-bind来绑定表单的value属性。
2：用v-on来绑定输入表单时输入的值传给data里面的message。

	<label for="">
        <input type="text" :value="message" @input="change">
    </label>
    <h1>{{message}}</h1>

change方法：event浏览器事件触发产生的参数，这里是由input输入时产生

change(event){
                this.message=event.target.value;
            }

v-model常用用法

单选框（radio）

多个单选框用name或v-model绑定同一个值时都可以实现只能选一个的效果，如果没用name或v-model去绑定同一个值时，那么就可以多选。

	<label for="male">
        <input type="radio" id="male" value="男" name="sex" v-model="sex">男
    </label>
    <label for="woman">
        <input type="radio" id="woman" value="女" name="sex" v-model="sex">女
    </label>
    <h1>{{sex}}</h1>

<script>
    const app = new Vue({
        el:'#app',
        data:{
            sex:"女"
        }
    })
</script>

复选框（checkbox）

单个复选框：

	<label for="">
        <input type="checkbox" value="true" v-model="agree">同意
    </label>
    <button :disabled="this.agree===false">下一步</button>
    <h1>{{agree}}</h1>

同意后下一步这个按钮才能点击

<script>
    const app = new Vue({
        el:'#app',
        data:{
            agree:false
        }
    })
</script>

多个复选框：

    <label for="">
        <input type="checkbox" value="篮球" v-model="hobby">篮球
        <input type="checkbox" value="羽毛球" v-model="hobby">羽毛球
        <input type="checkbox" value="台球" v-model="hobby">台球
        <input type="checkbox" value="排球" v-model="hobby">排球
        <input type="checkbox" value="足球" v-model="hobby">足球
        <input type="checkbox" value="乒乓球" v-model="hobby">乒乓球
    </label>
    <h1>{{hobby}}</h1>

选中复选框后，选中内容（value值会被加到v-model帮的hobby数组中）

<script>
    const app = new Vue({
        el:'#app',
        data:{
            hobby:[]
        }
    })
</script>

多个复选框内容可以用v-for简写：

	<label v-for="item in Hobby" :for="item">
        <input type="checkbox" :value="item" :id="item" v-model="hobby2">{{item}}
    </label>
    <h1>{{hobby2}}</h1>

v-for遍历Hobby数组中的内容，在复选框中展示。选中内容用v-model绑定到hobby2数组中

<script>
    const app = new Vue({
        el:'#app',
        data:{
            Hobby:["篮球","足球","羽毛球","台球","乒乓球"],
            hobby2:[]
        }
    })
</script>

下拉框

多选和单选v-model绑定的对象不同

	<!--1.选择一个-->
    <select name="fruit" v-model="fruit">
        <option value="苹果">苹果</option>
        <option value="香蕉">香蕉</option>
        <option value="榴莲">榴莲</option>
        <option value="葡萄">葡萄</option>
    </select>
    <h2>您选择的水果是: {{fruit}}</h2>

    <!--2.选择多个-->
    <select name="fruits" v-model="fruits" multiple>
        <option value="苹果">苹果</option>
        <option value="香蕉">香蕉</option>
        <option value="榴莲">榴莲</option>
        <option value="葡萄">葡萄</option>
    </select>
    <h2>您选择的水果是: {{fruits}}</h2>

<script>
    const app = new Vue({
        el:'#app',
        data:{
            fruit:"葡萄",
            fruits:[],
        }
    })
</script>

v-model常用修饰符

v-model.lazy
在输入框中输入内容不会立刻绑定到data中，敲击键盘enter后，会绑定上data中

<input type="text" v-model.lazy="message">
    <h2>{{message}}</h2>

<script>
    const app = new Vue({
        el:'#app',
        data:{
            message:"hi"
        }
    })
</script>