Vue指令:v-cloak、v-once、v-pre 指令

 Vue 指令系列文章:

《Vue插值:双大括号标签、v-text、v-html、v-bind 指令》

《Vue指令:v-cloak、v-once、v-pre 指令》

《Vue条件判断:v-if、v-else、v-else-if、v-show 指令》

《Vue循环遍历:v-for 指令》

《Vue事件处理:v-on 指令》

《Vue表单元素绑定:v-model 指令》

1、v-cloak 指令

v-cloak 指令可以隐藏未编译的 Mustache 标签直到实例准备完毕,否则在渲染页面时,有可能用户会先看到 Mustache 标签,然后看到编译后的数据。

(1)设置CSS样式 display:none

<style type="text/css">[v-cloak] {display: none !important;}
</style>

(2)使用 v-cloak  指令,指令格式:

<p v-cloak>{{message}}</p>

【实例】使用 v-cloak 指令,解决Vue使用双大括号标签绑定数据时,因页面加载延时而产生的闪烁问题。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="author" content="pan_junbiao的博客"><title>v-cloak 指令</title><!-- 设置样式 --><style type="text/css">[v-cloak] {display: none !important;}</style>
</head><body><div id="app"><p v-cloak>{{blogName}}</p><p v-cloak>{{blogUrl}}</p></div>
</body><!-- 引入 Vue 框架 -->
<script src="../js/vue.global.js"></script><script type="text/javascript">//使用延时2秒方式,模拟页面的加载延时setTimeout(() => {//创建一个Vue应用程序实例const vueApp = Vue.createApp({//数据data() {return {blogName: "您好,欢迎访问 pan_junbiao的博客",blogUrl: "https://blog.csdn.net/pan_junbiao"}}}).mount('#app');}, 2000);
</script></html>

执行结果:

2、v-once 指令

使用 Vue 指令绑定数据时,如果只需要渲染一次数据,则可以使用 v-once 指令单次插值。单次插值即只执行一次插值,在第一次插入文本后,当数据对象中的属性值发生改变时,插入的文本将不会更新。

指令格式:

<p v-once>{{message}}</p>

3、v-pre 指令

如果想要像是 {{ }} 标签,而不是进行替换,可以使用 v-pre 指令,通过该指令可以跳过该元素和其子元素的编译过程。

指令格式:

<p v-pre>{{message}}</p>

【实例】使用 v-pre 指令。

<body><div id="app"><h3>{{title}}</h3><p v-pre>{{blogName}}</p><p v-pre>{{blogUrl}}</p></div>
</body><!-- 引入 Vue 框架 -->
<script src="../js/vue.global.js"></script><script type="text/javascript">// 使用 Vue.createApp 函数创建一个应用程序实例const vueApp = Vue.createApp({//数据data() {return {title: "使用 v-pre 指令",blogName: "您好,欢迎访问 pan_junbiao的博客",blogUrl: "https://blog.csdn.net/pan_junbiao"}}//使用 mount() 方法,装载应用程序实例的根组件}).mount('#app'); 
</script>

执行结果:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/407720.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【机器学习练习】糖尿病预测

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 一、数据预处理 1. 数据导入 import numpy as np import pandas as pd import seaborn as sns from sklearn.model_selec…

css 将背景图片居中显示,并且显示全,不拉伸的效果实现,图片设置宽度,高度自适应,并且显示全。

1、背景自适应的css&#xff1a; .bg-tns {background-image: url(img/xxx.jpg);background-size: cover;background-position: center; /* 将图片居中显示 */min-height: calc(100vh-100px); /* 确保至少为视口高度 */} 这个布局是这样的&#xff1a; 这里的背景图的高度&am…

unity Standard Assests资源商店无法安装解决方案

Unity游戏开发 “好读书&#xff0c;不求甚解&#xff1b;每有会意&#xff0c;便欣然忘食。” 本文目录&#xff1a; Unity游戏开发 Unity游戏开发unity中国 嗨嗨嗨&#xff0c;我来啦。 这几天的川渝之旅已经圆满结束了&#xff0c;今天开始正常给大家更新&#xff1a; Unity…

Unity与UE,哪种游戏引擎适合你?

PlayStation vs Xbox&#xff0c;Mario vs Sonic&#xff0c;Unreal vs Unity&#xff1f;无论是游戏主机、角色还是游戏引擎&#xff0c;人们总是热衷于捍卫他们在游戏行业中的偏爱。 专注于游戏引擎&#xff0c;Unity和Unreal Engine&#xff08;简称UE4&#xff09;是目前市…

利用漏洞实现 Outlook 的 RCE:第 2 部分

## 攻击面 Outlook 要播放的声音文件是波形音频文件格式( WAV)。它通过接收声音文件路径的PlaySound函数播放。PlaySound将加载文件、解析它,然后调用soundOpen,后者将调用不同的波形函数,例如waveOutOpen。 WAV 文件充当多个音频编解码器的容器(或包装器)。编解码器是一…

Shire 0.5 发布:构建数据安全 RAG,充分整合研发资产

最近&#xff0c;我们发布了新版本的 Shire&#xff0c;在这个新的发布&#xff08;Shire 0.5&#xff09;里&#xff0c;你可以更好地融合本地研发资产&#xff0c;同时构建数据安全 RAG。在这次版本中&#xff0c;我们增加了&#xff1a; 对 SonarQube 的 issue 支持。可以直…

从0到1构建视频汇聚生态:EasyCVR视频汇聚平台流媒体协议支持的前瞻性布局

TSINGSEE青犀EasyCVR视频汇聚平台是一款基于云-边-端一体化架构的视频融合AI智能分析平台&#xff0c;广泛应用于工地、仓储、工厂、社区、校园、楼宇等多个领域。平台凭借其强大的数据接入、处理、转码及分发能力&#xff0c;在视频监控领域展现出显著的技术优势和应用前景。本…

python项目在linux中的启动脚本(shell脚本)

背景&#xff1a; 在linux环境&#xff0c;使用shell脚本&#xff0c;实现对某个服务的启动、停止功能。 shell脚本的功能&#xff1a; 启动&#xff08;start&#xff09;&#xff1a;通过参数 start &#xff0c;实现启动服务。如果该服务已经启动&#xff0c;给出已经启动…

松下弧焊机器人维修 控制柜故障 连接线修复

一、Panasonic焊接机器人控制柜与机器人的接线 机器人的控制箱&#xff0c;一定要配对使用。松下焊接机器人控制柜已经记忆了机器人的绝对原点(机器人位置控制原点)。 二、编码器电缆 (圆形连接器) 1. 接口的插头插座要注意&#xff0c;插头要插到插座中。 2. 用一手握住电缆&a…

《黑神话:悟空》发售后快手游戏笔记本电脑GMV日环比增长40%

一、美联储9月降息预期升温 昨夜美股三大股指在震荡中收涨&#xff0c;市场情绪受到美联储7月会议纪要提振。纪要显示&#xff0c;美联储官员普遍倾向于9月降息&#xff0c;多位官员认为当前利率水平已对经济构成限制。此消息推动美股上涨&#xff0c;并带动金价创新高&#xf…

鸿蒙HarmonyOS编程开发:TLS单向认证通讯示例

1.TLS简介 TLS&#xff08;Transport Layer Security&#xff09;协议的前身是SSL&#xff08;Secure Socket Layer&#xff09;安全套接层协议&#xff0c;由Netscape公司于1994年提出&#xff0c;是一套网络通信安全协议。IETF&#xff08;The Internet Engineering Task Fo…

前端开发中的大屏布局方案:使用 rem 单位与动态设置 html 的 font-size

使用 rem 单位与动态设置 html 的 font-size 前言 随着设备尺寸的多样化&#xff0c;网页需要能够在不同大小的屏幕上提供良好的用户体验。传统的布局方式&#xff08;如使用 px&#xff09;在不同分辨率下可能会导致布局失真。为了解决这个问题&#xff0c;我们可以通过动态…

【UE5】基于摄像机距离逐渐剔除角色

效果 步骤 1. 新建一个工程&#xff0c;在内容浏览器中添加第三人称游戏内容包 2. 找到第三人称角色的材质实例“MI_Quinn_01”并打开 找到材质实例的父项材质“M_Mannequin” 打开材质“M_Mannequin” 在材质图表中添加如下节点 此时运行效果如文章开头所示。 参考视频&#…

flutter 中 ssl 双向证书校验

SSL 证书&#xff1a; 在处理 https 请求的时候&#xff0c;通常可以使用 中间人攻击的方式 获取 https 请求以及响应参数。应为通常我们是 SSL 单向认证&#xff0c;服务器并没有验证我们的客户端的证书。为了防止这种中间人攻击的情况。我么可以通过 ssl 双向认证的方式。即…

创意无限,尽在掌握:热门视频剪辑软件一览

我们记录生活、分享故事、传播信息用视频的频率越来越高了。而这些视频往往都是通过剪辑之后才能展示出当前的效果。那这次我们就来探索剪辑视频的时候都会用到什么工具吧。 1.福昕视频剪辑 连接直达>>https://www.pdf365.cn/foxit-clip/ 这是一款专为追求高效与创意…

【React】为什么Hooks不能出现在判断中

前言 在 React 中&#xff0c;Hooks 不能写在条件语句中&#xff0c;如下面这段代码点击button后则会报错。 import { useEffect, useState } from "react"export default () > {const [count, setCount] useState(0)if (count > 0) {useEffect(() > {co…

2-74 基于matlab的图像k-means聚类GUI

基于matlab的图像k-means聚类GUI&#xff0c;可对彩色图像进行Kmeans和meanshift进行聚类分析&#xff0c;生成最后的聚类图像以及聚类中心的迭代轨迹。程序已调通&#xff0c;可直接运行。 2-74 matlab GUI - 小红书 (xiaohongshu.com)

iOS 通知

iOS 通知分为本地推送和远程推送两类 一. 本地推送使用流程 1. 注册通知 //请求通知权限 UNUserNotificationCenter *center [UNUserNotificationCenter currentNotificationCenter];[center requestAuthorizationWithOptions:(UNAuthorizationOptionBadge | UNAuthorizati…

Java方法的使用

目录 一&#xff1a;方法概念及使用 1.1什么是方法 1.2 方法定义 1.3 方法调用的执行过程 1.4 实参和形参的关系(重要) 1.5 没有返回值的方法 二&#xff1a;方法重载 2.1 为什么需要方法重载 2.2 方法重载概念 2.3 方法签名 三. 递归 3.1递归的概念 3.2 递归执行过…

Unity 资源 之 Photon Inventory 2 (Game Creator 2)

免费获取资源&#xff1a; 有2种方式可免费获取资源&#xff1a; 在后台回复**“UnityAssetStore**“ 或 ”Unity资源”。在Unity官方地址&#xff1a;https://assetstore.unity.com/publisher-sale &#xff0c;兑换码&#xff1a;NINJUTSUGAMES 【本周限定】 关注我每周&a…