vue_o6_v-once、v-html、v-text、v-pre、v-cloak指令的使用

最新推荐文章于 2024-02-22 00:00:00 发布
最新推荐文章于 2024-02-22 00:00:00 发布
阅读量229 收藏
点赞数
分类专栏： vue专栏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Abdullahi_kanye/article/details/103447148
版权

一、v-once指令的使用

1、代码部分

<!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>
</head>
<body>
    <!-- v-once指令：展示第一次的数据，之后值就不会改变了 -->
    <div id='app'>
        <!-- 变量值会随着声明的改变而改变 -->
        <h2>{{message}}</h2>
        <!-- 变量值不会随着声明的改变而改变 -->
        <h2 v-once>{{message}}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app=new Vue({
            el:'#app',
            data:{
                message:'hello'
            }
        })
    </script>
</body>
</html>

2、效果展示图

在这里插入图片描述

3、代码截图

在这里插入图片描述

二、v-html指令的使用

1、代码部分

<!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>
</head>
<body>
    <div id='app'>
        <h2>{{url}}</h2>
        <!-- 就会显示出超链接形式 -->
        <h2 v-html="url"></h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app=new Vue({
            el:'#app',
            data:{
                message:'hello',
                url:'<a href="httP://www.baidu.com">百度一下</a>'
            }
        })
    </script>
</body>
</html>

2、效果图

在这里插入图片描述

3、代码截图

在这里插入图片描述

三、v-text指令的使用

1、代码部分

<!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>
</head>
<body>
    <div id='app'>
        <h2>{{message}},张三</h2>
        <!-- 后面的,张三会被覆盖掉 -->
        <h2 v-text="message">,张三</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app=new Vue({
            el:'#app',
            data:{
                message:'hello'
            }
        })
    </script>
</body>
</html>

2、效果图展示

在这里插入图片描述

3、代码截图

在这里插入图片描述

四、v-pre指令的使用

1、代码部分

<!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>
</head>
<body>
    <div id='app'>
        <h2>{{message}}</h2>
        <!-- v-pre:不解析数据，直接原封不动的显示出来 -->
        <h2 v-pre>{{message}}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app=new Vue({
            el:'#app',
            data:{
                message:'hello'
            }
        })
    </script>
</body>
</html>

2、效果图展示

在这里插入图片描述

3、代码截图

在这里插入图片描述

五、v-cloak指令的使用

1、代码部分

<!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>
    <!-- 如果有v-cloak的时候，页面就看不见东西，空白的。
        就不会像下面会先渲染出{{message}}这么个东西。然后等待一秒后就会显示出解析的hello
        原理：就是vue解析之前有v-cloak这么个属性指令，那么符合下面的style样式，那么就会不显示出{{message}}
             在vue解析之后，会自动删掉v-cloak这个属性指令，那么style样式就没用了，那么就会自动正常解析出hello数据
     -->
    <style>
    [v-cloak]{
        display: none;
    }
    </style>
</head>
<body>
    <!-- 在vue解析之前，div中有一个属性v-cloak ；在vue解析之后，就会相当于把v-cloak删掉了，就没有v-cloak这个属性了 -->
    <div id='app' v-cloak>
        <h2>{{message}}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        // setTimeout：延迟执行。页面会先渲染出{{message}}，等待一秒后才会解析出hello，体验效果不好，所以要用v-cloak
        setTimeout(function(){
            const app=new Vue({
            el:'#app',
            data:{
                message:'hello'
            }
        })
        },1000)       
    </script>
</body>
</html>

2、效果展示图

由于有个setTimeOut定时方法：所有使用v-cloak指令和不使用会展示出两种不同的效果

（1）没有使用v-cloak指令的时候

在这里插入图片描述

（2）使用v-cloak指令的时候

在这里插入图片描述

3、代码截图

在这里插入图片描述

Abdullahi_kanye
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue笔记 内置指令 v-text v-html v-cloak v-once v-pre
qiaoyangla的博客
03-24 2099
v-bind：单向绑定解析表达式，可简写为：xxx v-model:双向数据绑定 v-for：遍历数组/对象/字符串 v-on：绑定事件监听，可简写为@ v-if：条件渲染（动态控制节点是否存在） v-else：条件渲染（动态控制节点是否存在） v-show：条件渲染（动态控制节点是否展示） 1、v-text 向其所在的节点中渲染文本内容, 与插值语法的区别：v-text会替换掉节点中的内容，{{xxx}}不会，还是插值语法用的多 <div>{{name}}</div
Vue指令指令大全
10-17
本文为大家介绍了VUE中内置指令包括：v-text,v-html,v-show,v-if,v-else,v-else-if,v-for,v-on,v-bind,v-model,v-pre,v-cloak,v-once
Vue.js 中的 v-cloak 指令及使用详解
10-17
主要介绍了Vue.js 中的 v-cloak 指令及使用详解，通过案例给大家简单介绍了vue中v-cloak的使用，感兴趣的朋友跟随小编一起看看吧
Day7——v-once、v-html、v-text、v-pre指令的使用
Android_la的博客
07-17 161
文章目录一. 回顾二. 其他指令的使用2.1 v-once指令2.2 v-html指令2.3 v-text指令2.4 v-pre指令 一. 回顾 前面学习了Day6——插值操作——mustache语法，今天学习v-once、v-html、v-text、v-pre指令。 二. 其他指令的使用 2.1 v-once指令 作用：变量不会随着数据的改变而改变。即不会响应式。 例子： <div id="app"> <h2>{{message}}</h2> <h2 v-
vue 避免渲染时闪烁
weixin_34279579的博客
05-15 290
&lt;!DOCTYPE html&gt; &lt;html lang="zh"&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=
vue 动态组件与 v-once 指令
Jinmy的博客
09-15 209
实现一个功能，点击按钮，实现两个标签的切换显示隐藏： 代码一： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Vue v-once 指令&lt;/title&gt; &lt;script src="./vue.j
v-cloak 指令作用及适用场景
大剑师兰特的GIS世界
02-22 1167
v-cloak 是一个实用的 Vue 指令，它可以在页面加载期间防止用户看到未编译的 Vue 代码。当使用 v-cloak 时，通常会结合 CSS 规则来确保在 Vue 编译过程完成之前，用户看不到任何预编译的内容。这包括防止大括号 {{ }} 和其他模板语法在页面上闪烁。
Vue-26、Vue内置指令v-cloak与v-once以及v-pre
ChenJin_2的博客
01-17 476
Vue-26、Vue内置指令v-cloak与v-once
Vue指令v-bloak和v-text,v-html,v-pre,v-once
清风的博客
11-08 899
1.Vue中的指令 有特殊含义的自定义属性,全部用v-开头,一共有13个; 本质就是自定义属性 1.1 v-cloak指令 在Vue中规定,在页面渲染完成后,会获取所有添加有v-bloak属性的元素,并设置其显示(display=‘block’),需要自己手动添加css样式,将含有v-cloak的元素设置为隐藏 防止页面加载闪烁问题 <style type="text/css"> ...
v-if 和v-for的联合使用规则
大剑师兰特的GIS世界
02-09 2052
v-if和v-for是Vue.js中非常强大的指令，它们可以帮助开发者轻松地实现条件渲染和列表渲染。然而，正确地使用这两个指令是非常重要的，因为它们的性能影响可能会很大。通过遵循上述规则和最佳实践，我们可以确保我们的Vue应用既高效又易于维护。
Vue之v-once、v-html、v-text、v-pre、v-cloak的基本使用
兮动人
06-22 443
v-once基本使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <h2>{{message}}</h2> <h2 v-once>{{messa
learn-vue-note
04-12
这些指令只是Vue中的一部分，还有更多如`v-bind:key`、`v-bind:class`、`v-bind:style`等用于更复杂场景的指令。学习和理解Vue的指令系统是掌握Vue.js开发的关键步骤，它们能帮助开发者以声明式的方式控制视图，提高...
03-基础语法.pdf
09-18
`v-cloak`指令用于隐藏未编译的Mustache标签，直到Vue实例完成初始化。这可以防止在页面加载过程中出现未处理的数据绑定的闪烁效果。 接下来是`v-bind`指令，它用于动态地绑定元素属性。例如，可以使用`v-bind:href...
这15个Vue指令,让你的项目开发爽到爆
10-16
9. **v-cloak**：用于隐藏未编译的Mustache语法，直到Vue实例完成编译。 10. **v-once**：只渲染元素和组件一次，后续数据变动不会再次渲染。 11. **v-hotkey**（自定义指令）：来自GitHub仓库[Dafrok/v-hotkey]...
vue v-html url,Vue 模板语法学习笔记
weixin_33415023的博客
06-16 445
目录一、Vue 指令学习二、vue 解决闪动问题 v-cloak三、数据绑定的指令3.1 v-text (我就是 innerText)3.2 v-html (会 innerHTML 吗)3.3 v-pre 跳过预编译3.4 v-once (一次编译，不在变换)3.5 v-model 双向数据绑定四、事件绑定 v-on使用4.1 简单事件处理4.2 使用函数处理事件4.3 事件函数传参4.4 事件修...
培训课件 -从0到1搭建培训管理体系.pptx
07-13
培训课件 -从0到1搭建培训管理体系.pptx
tensorflow-gpu-2.9.0-cp37-cp37m-win-amd64.whl.zip.(whl)
最新发布
07-14
使用时需去掉后缀.(whl)后再解压
JavaScript：ES6新特性深入解析
07-14
JavaScript：ES6新特性深入解析
vue学习笔记1
08-03
Vue的核心特点之一是它的指令系统，这些指令本质上是自定义属性，通常以`v-`开头，如`v-cloak`、`v-text`和`v-html`等。这些指令帮助我们更好地控制和操作DOM（文档对象模型）。 1. `v-cloak`指令：这个指令用于...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值