v-model双向绑定基础操作

目录

1、基本使用

2、实现原理

3、其他类型

• 3.1、radio

• 3.2、checkbox

• 3.3、select

• 3.4、值绑定

• 3.5、v-model修饰符

1、基本使用

• 使用v-model进行了双向绑定后，不仅修改message可以改变数据，在表单内输入数据message也会被修改。

<div id="app">
    <input type="text" v-model="message">
    <h2>{{message}}</h2>
</div>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            message:  '双向绑定'
        },
        methods: {}
    });
</script>

2、v-model实现原理

• v-model == v-bind:value(动态获取message) + v-on:input（实时监听表单是否发生改变）的结合。
• $event.target.value：获取表单内的最新值。

<div id="app">
    <input type="text" v-bind:value="message" v-on:input="changeData">
    <h2>{{message}}</h2>
</div>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            message:  '双向绑定'
        },
        methods: {
            changeData(event){
                this.message = event.target.value;
            }
        }
    });
</script>

<!--另一种写法-->
<input type="text" v-bind:value="message" v-on:input="message = $event.target.value;">

3、v-model其他类型

3.1、input-radio类型

<div id="app">
    <label for="man">
        <input type="radio" id="man" v-model="sex" value="男">男
    </label>
    <label for="woman">
        <input type="radio" id="woman" v-model="sex" value="女">女
    </label>
    <h3>您选择的是：{{sex}}</h3>
</div>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            sex:  '男'
        },
    });
</script>

3.2、input-checkbox类型

<div id="app">
    <!---单个-->
    <label for="agreement">
        <input type="checkbox" v-model="isagree" id="agreement">同意协议
    </label>
    <h2>您的选择是：{{isagree}}</h2>
    <button  :disabled="!isagree" @click="test" id="btnClick">下一步</button>
    <br/>
    <!---多个-->
    <label for="basketball">
        <input type="checkbox" id="basketball" value="篮球" v-model="hobbies">篮球
    </label>
    <label for="football">
        <input type="checkbox" id="football" value="足球" v-model="hobbies">足球
    </label>
    <label for="baseball">
        <input type="checkbox" id="baseball" value="棒球" v-model="hobbies">棒球
    </label>
    <label for="Run">
        <input type="checkbox" id="Run" value="跑步" v-model="hobbies">跑步
    </label>

    <h2>您的爱好：{{hobbies}}</h2>
</div>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            isagree:  false,
            hobbies:[]
        },methods:  {
            test(){
                //防止从开发者中删掉disabled
                if(this.isagree == false){
                    document.getElementById("btnClick").disabled = true; 
                }else{
                    alert("success");
                }
            }
        }
    });
</script>

3.3、select

<div id="app">
    <!--单选-->
    <select v-model="fruit">
        <option value="香蕉">香蕉</option>
        <option value="苹果">苹果</option>
        <option value="葡萄">葡萄</option>
        <option value="榴莲">榴莲</option>
        <option value="橙子">橙子</option>
    </select>
    <h2>您选择的水果是：{{fruit}}</h2>

    <!--多选-->
    <select v-model="fruits" multiple>
        <option value="香蕉">香蕉</option>
        <option value="苹果">苹果</option>
        <option value="葡萄">葡萄</option>
        <option value="榴莲">榴莲</option>
        <option value="橙子">橙子</option>
    </select>
    <h2>您选择的水果种类：{{fruits}}</h2>
</div>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            fruit : '香蕉',
            fruits: []
        },
    });
</script>

3.4、值绑定（动态绑定value）

• 就是先定义好一堆值，再在html内遍历出来，这样更加高级，是动态的输出，根据传入的数据显示出不同的数据。
• 数据不是写死的，有利于复用。

<div id="app">
    <h2>您的爱好：{{hobbies}}</h2>
    <label v-for="item in originHobbies" :for="item">
        <!--在input内循环，{{item}}输出失败-->
        <input type="checkbox"  v-model="hobbies" :value="item" :id="item">{{item}}
    </label>
</div>
<script>
      let vm = new Vue({
        el: '#app',
        data: {
          hobbies:[],
          originHobbies:  ['篮球','足球','棒球','乒乓球','橄榄球','高尔夫球']
        }
      });
    </script>

3.5、v-model修饰符

• lazy：只有敲回车或者失去焦点时，进行值改变，使用lazy可以修改值不那么频繁。
• number：设置数据为number类型。
• trim：去除空格。

<div id="app">
    <label for="username">
        <!--lazy：只有在敲回车或者失去焦点时才会进行赋值-->
        用户名：<input id="username" type="text" v-model.lazy="Username">
    </label>
    <h2> 用户名：{{Username}}</h2>
    <label for="age">
        <!--
		number：将数据转换成number类型（数字）,只有纯数字才会转换
		但开始输入数字，后面输入字符时为number类型，失去焦点非数字数据消失，类型还是设置number好
		-->
        年龄：<input id="age" type="number" v-model.number="Age">
    </label>
    <h2>年龄：{{Age}}========={{typeof Age}}</h2>
    <label for="password">
        <!--去除前后空格-->
        密码：<input id="password" type="text" v-model.trim="Password">
    </label>
    <h2>密码：{{Password}}</h2>
</div>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            Username: '',
            Age:  20,
            Password: ''
        },
    });
</script>