6.常用指令（上）v-cloak，v-once，v-pre

最新推荐文章于 2024-02-23 00:00:00 发布

彼岸的饭碗

最新推荐文章于 2024-02-23 00:00:00 发布

阅读量186

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_42392049/article/details/116779526

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

v-cloak

v-cloak指令的作用是vue示例渲染后关联结束

双大括号插值语法在遇到网络延迟的时候会显示编译前的文本

<body>
    <div id="app">
        <p>{{a}}</p>
    </div>
    <script src="vue.js"></script>
    <script>
        var vue=new Vue({
            el:"#app",
            data:{
                a:"我是渲染的指令 v-cloak"
            },
        })
    </script>
</body>

在此，我们可以使用v-cloak结合CSS解决双大括号渲染的难题

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <p v-cloak>{{a}}</p>
    </div>
    <script src="vue.js"></script>
    <script>
        var vue=new Vue({
            el:"#app",
            data:{
                a:"我是渲染的指令 v-cloak"
            },
        })
    </script>
</body>

[v-cloak]css选择器选择的是html结构中有v-cloak的属性，有这个属性的元素设置display为none，由于v-cloak这个属性在vue的实例加载完之后关联结果，所以就需要这个元素的隐藏状态，这样造成的结果就是，要么空白，要么显示编译后的文本。

v-once

v-once的作用是只会渲染对应元素一次，数据更新不会引起视图的更新，目的是为了优化页面。

<body>
    <div id="app">
       <h2 v-once>{{a}}</h2>
       <button @click="add">点我加一</button>
       <button @click="minus">点我减一</button>
    </div>
    <script src="vue.js"></script>
    <script>
        var vue=new Vue({
            el:"#app",
            data:{
                a:100
            },
            methods:{
                add(){
                    this.a++
                    console.log(this.a)
                },
                minus(){
                    this.a--
                    console.log(this.a)
                }
            }
        })
    </script>
</body>

在这里插入图片描述使用场景通常是没有动态的元素内容，比如一些文章，一些固定标题

v-pre

v-pre属性的作用：跳过该元素的编译过程，直接显示元素内部的文本，功能就是跳过大量的没有指令的节点。

<h2 v-pre>{{a}}</h2>

在这里插入图片描述
浏览器显示的就是没有编译之前的h2元素中的文本内容，v-pre属性的优点就是优化页面的加载性能

彼岸的饭碗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
6.常用指令（上）v-cloak，v-once，v-pre

v-cloakv-cloak指令的作用是vue示例渲染后关联结束双大括号插值语法在遇到网络延迟的时候会显示编译前的文本<body> <div id="app"> <p>{{a}}</p> </div> <script src="vue.js"></script> <script> var vue=new Vue({ el
复制链接

扫一扫