4、Vue指令v-once、v-pre、v-model

最新推荐文章于 2023-07-20 23:13:47 发布

zjh的学习乐园

最新推荐文章于 2023-07-20 23:13:47 发布

阅读量685

点赞数 2

分类专栏： vue基础文章标签： vue vue.js

本文链接：https://blog.csdn.net/weixin_46841213/article/details/115392182

版权

vue基础专栏收录该内容

25 篇文章 2 订阅

订阅专栏

Vue指令v-once、v-pre、v-model

1、v-once
2、v-pre
3、v-model

1、v-once

v-once：只渲染一次，之后的重新渲染，元素及其所有的子节点将被视为静态内容并跳过。因为它使用缓存中的值，不再使用vm中的值，数据也就不再变化。这可以用于优化跟新性能。

<body>
    <div id="app">
        <!-- 使用v-once，只会在初始化的时候插入一次值 当数据发生变化时，视图不再发生更新 -->
        <h2 v-once>{{ dec }}</h2>
    </div>
    <script src="./Vuejs/vue2-6-12.js"></script>
    <script>
       var vm = new Vue({
           el:"#app",
           data:{
               dec:"v-once渲染"
           }
       })
    </script>
</body>

当没使用v-once时：修改vm中dec的值后，页面刷新。
在这里插入图片描述
当使用v-once时：修改vm中dec的值后，页面不刷新。

2、v-pre

v-pre：不使用vue语法进行渲染，跳过元素和他的子元素的编译过成。相当于不编译指令。

<body>
    <div id="app">
        <h2 v-pre>{{ dec }}</h2>
    </div>
    <script src="./Vuejs/vue2-6-12.js"></script>
    <script>
       var vm = new Vue({
           el:"#app",
           data:{
               dec:"v-pre渲染"
           }
       })
    </script>
</body>

在这里插入图片描述

3、v-model

3.1、v-model介绍

v-model：表单元素的双向数据绑定。数据更新元素会更新、元素更新数据也会更新。本质上v-model是value和input事件的语法糖。

<style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <input type="text" v-model="dec">
        <br>
        <p v-cloak>{{dec}}</p>
    </div>
    <script src="./Vuejs/vue2-6-12.js"></script>
    <script>
       var vm = new Vue({
           el:"#app",
           data:{
               dec:""
           }
       })
    </script>
</body>

在这里插入图片描述

在这个例子中，我们可以看到input输入了什么，p标签里面的插值表达式的值就为多少，同样的，我们设置vm.dec的值的时候，input上面的值也会随之发生变化，它们之间是双向数据绑定的。同时在这个例子中，我们运用了v-cloak，当没有使用v-cloak的时候，我们不停刷新页面的时候，会发现刷新的瞬间p标签里面的内容是如上显示的{{dec}}。
在这里插入图片描述
①、上面的例子是input中type的值为text的情况，即当为文本输入框的情况，这里，当使用的是复选框的时候，即type的值为checkbox时的情况：

<style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <input type="checkbox" v-model="hobby">爱好
        <p v-cloak>{{hobby}}</p>
    </div>
    <script src="./Vuejs/vue2-6-12.js"></script>
    <script>
       var vm = new Vue({
           el:"#app",
           data:{
               dec:"",
               hobby:""
           }
       })
    </script>

在这里插入图片描述

我们可以看到当我们勾选了”爱好”之后，返回的vm.hobby的值为true，当我们取消勾选后，返回的值为false。
当我们做如下修改的时候：

<script>
       var vm = new Vue({
           el:"#app",
           data:{
               dec:"",
               hobby:[]
           }
       })
</script>

即将hobby修改成空的数组，即[]。我们发现返回的值为：
在这里插入图片描述

当我们给input设置value值的时候即：

 <input type="checkbox" v-model="hobby" value="haha">爱好

在这里插入图片描述

<div id="app">
        <input type="checkbox" v-model="hobby" value="摸鱼">摸鱼
        <input type="checkbox" v-model="hobby" value="学习">学习
        <input type="checkbox" v-model="hobby" value="写代码">写代码
        <input type="checkbox" v-model="hobby" value="玩手机">玩手机
        <p v-cloak>{{hobby}}</p>
    </div>
    <script src="./Vuejs/vue2-6-12.js"></script>
    <script>
       var vm = new Vue({
           el:"#app",
           data:{
               dec:"",
               hobby:[]
           }
       })
    </script>

在这里插入图片描述
②、同样的也可以完成双向绑定。在单选框里面，也存在这样的双向绑定。

<div id="app">
       <input type="radio" name="life" v-model="hobby" value="吃饭">吃饭
       <input type="radio" name="life" v-model="hobby" value="学习">学习
        <p v-cloak>{{hobby}}</p>
    </div>
    <script src="./Vuejs/vue2-6-12.js"></script>
    <script>
       var vm = new Vue({
           el:"#app",
           data:{
               dec:"",
               hobby:[]
           }
       })
    </script>

在这里插入图片描述

3.2、v-model修饰符

3.2.1、.lazy

使用change事件而非input事件，如果不需要实时更新，则可以用.lazy。

<div id="app">
        <p>没有添加修饰符</p>
        <input type="text" v-model="meg">
        <p>添加修饰符.lazy</p>
        <input type="text" v-model.lazy="meg">
    </div>
    <script src="./Vuejs/vue2-6-12.js"></script>
    <script>
       var vm = new Vue({
           el:"#app",
           data:{
               meg:'修饰符'
           }
       })
    </script>

在这里插入图片描述
在上面例子中，上面是没有添加.lazy的v-model，下面是添加了.lazy的v-model，他们最主要的区别在于添加.lazy的元素没办法实时更新，需要input标签内容发生改变时，才会改变v-model绑定的值，如上面的例子，我们对第一个input进行修改的时候，下面的值会随着变化，而对第二个修改的时候，之后按回车或者其他onchange事件后，才会修改对应的值。

3.2.2、.number

.number：因为v-model绑定数据是一个字符串，会将数据中的字符串转为number类型。

<div id="app">
        <input type="text" v-model.number="num">
        <p v-cloak>{{num}}</p>
    </div>
    <script src="./Vuejs/vue2-6-12.js"></script>
    <script>
       var vm = new Vue({
           el:"#app",
           data:{
               num:'1'
           }
       })
    </script>

在这里插入图片描述

.number的作用就是当我们输入的文本的内容以数字开头的话，那么后面的非数字内容就会被忽略掉，此时msg的格式为number格式。但是当我们输入的内容是以字符串开头的话，那么就会将msg的值修改成字符串的格式，那么就无法忽略字符串的内容。

3.3.3、.trim

.trim：去掉前后的空格

 <div id="app">
        <input type="text" v-model.trim="num">
        <p v-cloak>{{num}}</p>
    </div>
    <script src="./Vuejs/vue2-6-12.js"></script>
    <script>
       var vm = new Vue({
           el:"#app",
           data:{
               num:''
           }
       })
    </script>

在这里插入图片描述

zjh的学习乐园

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
4、Vue指令v-once、v-pre、v-model

Vue指令v-once、v-pre、v-model1、v-once2、v-pre3、v-model3.1、v-model介绍3.2、v-model修饰符3.2.1、.lazy3.2.2、.number3.3.3、.trim1、v-oncev-once：只渲染一次，之后的重新渲染，元素及其所有的子节点将被视为静态内容并跳过。因为它使用缓存中的值，不再使用vm中的值，数据也就不再变化。这可以用于优化跟新性能。<body> <div id="app"> &l
复制链接

扫一扫