v-once的使用

最新推荐文章于 2022-02-19 12:00:18 发布

浅浅呐

最新推荐文章于 2022-02-19 12:00:18 发布

阅读量4.8k

点赞数 1

分类专栏： vue 前端文章标签： vue.js

本文链接：https://blog.csdn.net/qq_41445106/article/details/106062256

版权

前端同时被 2 个专栏收录

80 篇文章 1 订阅

订阅专栏

vue

11 篇文章 1 订阅

订阅专栏

通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。
写几行代码对比下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <p v-once>输入框的值：{{ msg }}</p>
        <p>输入框的值：{{ msg }}</p>
        <input type="text" v-model="msg">
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                msg: "hello world"
            },
            methods: {
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

发现第一个值一直不变，第二个值随着输入框输入值的变化不断变化，如果进入页面后，展示的信息不会再做更改，可以使用v-once，使用了v-once的元素/组件及其所有的子节点，只会渲染一次，后面的渲染都会被当作静态内容跳过，可以优化性能。

浅浅呐

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
v-once的使用

通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。写几行代码对比下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U
复制链接

扫一扫