前端VUE3.0,DAY26，v-once指令

最新推荐文章于 2024-03-20 17:28:59 发布

疯子的梦想＠

最新推荐文章于 2024-03-20 17:28:59 发布

阅读量307

点赞数

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

本文链接：https://blog.csdn.net/weixin_48681463/article/details/120039488

版权

前端专栏收录该内容

110 篇文章 4 订阅

订阅专栏

VUE3.0,DAY26

案例展示

1.我们想在页面显示一个值，当点击按钮时，该值自加1.同时页面中显示初始值不变。
在这里插入图片描述
2.这样写代码，会出现bug，即初始值会变，那么我们希望vue能够记住这个初始值，并不改变。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-once指令</title>
    <!--引入vue-->
    <script type="text/javascript" src="../vue.js">
        Vue.config.productionTip = false
    </script>
    <!--上边的vue.config选项关闭了启动时生成生产提示-->
</head>

<body>
    <!--准备好一个容器-->
    <div id="root">
        <h2 >初始化的n值是{{n}}</h2>
        <h2>当前的n值是{{n}}</h2>
        <button @click="n++">点我n+1</button>
    </div>

    <!--下边的vue.config选项关闭了启动时生成生产提示-->
    <script type="text/javascript">
        Vue.config.productionTip = false
        new Vue({
            el: '#root',
            data() {
                return {
                    n: 1

                }
            },
        })

    </script>
</body>

</html>

v-once

3.使用v-once内嵌指令，注意，v-once是没有值的，即只有一个v-once，没有等号，没有值，与v-cloak一样。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-once指令</title>
    <!--引入vue-->
    <script type="text/javascript" src="../vue.js">
        Vue.config.productionTip = false
    </script>
    <!--上边的vue.config选项关闭了启动时生成生产提示-->
</head>

<body>
    <!--准备好一个容器-->
    <div id="root">
        <h2 v-once>初始化的n值是{{n}}</h2>
        <h2>当前的n值是{{n}}</h2>
        <button @click="n++">点我n+1</button>
    </div>

    <!--下边的vue.config选项关闭了启动时生成生产提示-->
    <script type="text/javascript">
        Vue.config.productionTip = false
        new Vue({
            el: '#root',
            data() {
                return {
                    n: 1

                }
            },
        })

    </script>
</body>

</html>

在这里插入图片描述

总结

v-once指令:
1.v-once所在节点在初次动态渲染后，就视为静态内容了。
2.以后数据的改变不会引起v- once所在结构的更新，可以用于优化性能。

疯子的梦想＠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端VUE3.0,DAY26，v-once指令

VUE3.0,DAY26案例展示v-once总结案例展示1.我们想在页面显示一个值，当点击按钮时，该值自加1.同时页面中显示初始值不变。2.这样写代码，会出现bug，即初始值会变，那么我们希望vue能够记住这个初始值，并不改变。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" co
复制链接

扫一扫

专栏目录