2020-05-06 23:32:56 版本 : v-model及其修饰符的使用

作者: 朱凡于 2020年05月06日 发布在分类 / FM组 / FM_App 下,并于 2020年05月06日编辑

历史版本

修改日期	修改人	备注
2020-05-06 23:33:49[当前版本]	朱凡	格式调整
2020-05-06 23:32:56	朱凡	创建版本

v-model及其修饰符的使用

v-model

预期：随表单控件类型不同而不同
限制: 在input textarea select中使用
修饰符：.lazy .number .trim

基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="name">
    <pre>{{name}}</pre>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
    let app=new Vue({
        el:'#app',
        data:{
            name:'wanghh',
        }
    })
</script>
</body>
</html>

可以看出来当改变input值时，下面的值也随之改变，这就是双向绑定

在这里插入图片描述

修饰符

.lazy惰性更新

把刚才的代码改成v-model.lazy=“name”

 <input type="text" v-model.lazy="name">

会发现改变输入框里的值时，下面的值不会实时更新，直至我输入完按回车键，或者鼠标点击其他地方input失去焦点时，值才改变。

简而言之就是，当输入框失去焦点后改变绑定的值。

.trim去除前后空格

改一行代码

 <input type="text" v-model.trim="name">

效果图如下，虽然输入框中输入很多空格但得到的值空格被去除。

在这里插入图片描述
再点击其他地方，使其失去焦点，输入框里的值变成去除空格后的值

.number将输入的字符串转为数字

如果不用.number

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="price">
    <pre>{{typeof price}}</pre>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
    let app=new Vue({
        el:'#app',
        data:{
            name:'wanghh',
            price:'3333',
        },
    })
</script>
</body>
</html>

效果图如下

在这里插入图片描述
当加上.number

<input type="text" v-model.number="price">

改变输入框的值(输入数字），效果如下
在这里插入图片描述

在其他元素上的使用

以下代码使用了Input里的radio,checkbox以及textarea和select

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <label>
    男
        <input v-model="sex" value="male" type="radio">
    </label>
    <label>
        女
        <input v-model="sex" value="female" type="radio">
    </label>
    <span>{{sex}}</span>
    <br />
    <br />
    <label>
        游泳
        <input v-model="hobby" value="swimming" type="checkbox">
    </label>
    <label>
        绘画
        <input v-model="hobby" value="painting" type="checkbox">
    </label>
    <span>{{hobby}}</span>
    <br />
    <br />
    <textarea v-model="article"></textarea>
    <br />
    <br />
    <div>你要去哪里</div>
    <select v-model="from">
        <option value="1">王家沟</option>
        <option value="2">知春路</option>
    </select>
    <span>{{from}}</span>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
    let app=new Vue({
        el:'#app',
        data:{
            sex:'female',
            hobby:[],
            article:'djakshckjdsssssssssssssssssssssssssssssssssssssssssssssa',
            from:1,
        },
    })
</script>
</body>
</html>

得到的效果是