v-model表单绑定

目录

1、基本使用

2、v-model结合radio类型使用

3、v-model结合checkbox 

4、结合select使用-单选/多选

5、v-model修饰符

---

Vue中使用v-model指令来实现表单元素和数据的双向绑定。

 

1、基本使用

<div id="demo">
    <label>
        <input type="text" v-model="message" @focusout="focusOut">
        {{message}}
    </label>
</div>
<script>
    let vm = new Vue({
        el: '#demo',
        data: {
            message: '123',
        },
        methods:{
            focusOut(){
                alert(this.message);
            }
        },
    });
</script>

当然，我们也可以对textarea使用v-model

原理：

v-bind:value="message"

v-on:input="valueChange"

 

valueChange(event){

    this.message = event.target.value;

}

 

2、v-model结合radio类型使用

<div id="demo">
    <label for="man">
        <input type="radio" name="gender" id="man" value="男" v-model="gender">
        男
    </label>
    <br>
    <label for="woman">
        <input type="radio" name="gender" id="woman" value="女" v-model="gender">
        女
    </label>
    <h2>选择的性别是：{{gender}}</h2>
</div>
<script>
    let vm = new Vue({
        el: '#demo',
        data: {
            gender:'',
        }

    });
</script>

3、v-model结合checkbox 

结合checkbox单选

<div id="demo">
    <label for="checkboxSingle" id="agree">
        <input type="checkbox" id="checkboxSingle" v-model="isAgree">同意协议
    </label>
    <h2>你选择的是{{ isAgree }}</h2>
    <button :disabled="!isAgree">下一步</button>
</div>
<script>
    let vm = new Vue({
        el: '#demo',
        data: {
            isAgree: false,
        }
    });
</script>

结合checkbox多选

<div id="demo">
    <label>
        <input type="checkbox" value='篮球' v-model="hobbies">篮球
        <input type="checkbox" value='足球' v-model="hobbies">足球
        <input type="checkbox" value='乒乓球' v-model="hobbies">乒乓球
        <input type="checkbox" value='羽毛球' v-model="hobbies">羽毛球
    </label>
    <h2>您的爱好是：{{hobbies}}</h2>
</div>
<script>
    let vm = new Vue({
        el: '#demo',
        data: {
            hobbies:[],
        }
    });
</script>

 

4、结合select使用-单选/多选

<div id="demo">
    <label for="selectSingle">
        选水果
        <select name="selectSingle" id="selectSingle" v-model="fruit">
            <option value="苹果">苹果</option>
            <option value="香蕉">香蕉</option>
            <option value="葡萄">葡萄</option>
            <option value="牛油果">牛油果</option>
        </select>
    </label>
    <h2>选择的是：{{ fruit }}</h2>
    <hr>
    <label for="selectDouble">
        选水果
        <select name="selectDouble" id="selectDouble" v-model="fruits" multiple>
            <option value="苹果">苹果</option>
            <option value="香蕉">香蕉</option>
            <option value="葡萄">葡萄</option>
            <option value="牛油果">牛油果</option>
        </select>
    </label>
    <h2>选择的是：{{ fruits }}</h2>
</div>
<script>
    let vm = new Vue({
        el: '#demo',
        data: {
            fruit: '',
            fruits:[],
        }
    });
</script>

 

5、v-model修饰符

• lazy修饰符：

默认情况下，v-model是在input事件中同步数据框的数据的，也就是说，一旦有数据改变，data中的数据就会自动发生改变。

而：lazy可以让数据在失去焦点或者回车时才会更新。

• number修饰符

默认情况下，在输入框中，无论我们输入的是字母还是字符串，都会当做字符串类型进行处理。

：number修饰符可以让在输入框中输入的数字自动转换成数字类型。

• trim修饰符

如果输入的内容，首尾有很多空格，通常我们希望将其去除。

这时我们可以使用trim修饰符过滤内容左右两边的空格。

<div id="demo">
    <label for="inda">修饰符lazy测试：
        <input type="text" v-model.lazy="message" id="inda">
    </label>
    <h2>typeof:{{typeof message}}</h2>
    <h2>{{message}}</h2>
    <hr>
    <label for="inda2">修饰符number测试：
        <input type="number" v-model.lazy.number="number" id="inda2">
    </label>
    <h2>typeof:{{typeof number}}</h2>
    <h2>{{number}}</h2>
    <hr>
    <label for="inda3">修饰符trim测试：
        <input type="text" v-model.trim="text" id="inda3">
    </label>
    <h2>typeof:{{typeof text}}</h2>
    <h2>{{text}}</h2>
</div>
<script>
    let vm = new Vue({
        el: '#demo',
        data: {
            message: '123',
            number: 123,
            text:'',
        }
    });
</script>