v-model及其修饰符的使用

最新推荐文章于 2024-05-25 14:55:49 发布

qq_33712668

最新推荐文章于 2024-05-25 14:55:49 发布

阅读量2.2k

点赞数 3

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_33712668/article/details/90378115

版权

vue 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

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>

得到的效果是

在这里插入图片描述

qq_33712668

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
v-model及其修饰符的使用

v-model预期：随表单控件类型不同而不同限制: 在input textarea select中使用修饰符：.lazy .number .trim基本使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title...
复制链接

扫一扫