当前位置： 首页 > news >正文

vue模版语法-{{}}/v-text/v-html/v-once

news 文章来源：https://blog.csdn.net/QWERTY55555/article/details/133655024 2025/1/16 13:10:12

一、{{}}双括号：用于文本渲染

       1、 {{变量名}}:data中返回对象的变量名

        2、{{js表达式}}:可以直接进行js表达式处理

        3、注意：双大括号中不要写等式书写

二、v-text 指令，用于文本渲染

        1、为了解决双大括号渲染数据出现闪烁问题

三、v-cloak 指令：用于隐藏尚未完成编译的DOM模板

        原理：先隐藏，编译完成后再显示

        1、定义样式：将带有 v-cloak 指令的标签属性

        2、在需要被解决闪烁问的元素加上v-cloak

四、v-html：用于输出真正的HTML内容（v-text 不管什么都当文本输出）

        注意：v-html 遇到<script>标签和vue语法代码会被忽略，直接显示，防止xss攻击

五、v-once 一次性插值，当后面数据更新后，视图不会被更新

<!DOCTYPE html>
<html lang="en">
<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><!--一、{{}}双括号：用于文本渲染{{变量名}}:data中返回对象的变量名{{js表达式}}:可以直接进行js表达式处理注意：双大括号中不要写等式书写二、v-text 指令，用于文本渲染1、为了解决双大括号渲染数据出现闪烁问题三、v-cloak 指令：用于隐藏尚未完成编译的DOM模板原理：先隐藏，编译完成后再显示1、定义样式：将带有 v-cloak 指令的标签属性2、在需要被解决闪烁问的元素加上v-cloak四、v-html：用于输出真正的HTML内容（v-text 不管什么都当文本输出）注意：v-html 遇到<script>标签和vue语法代码会被忽略，直接显示，防止xss攻击五、v-once 一次性插值，当后面数据更新后，视图不会被更新--><!-- 定义根节点--><div id="app" v-cloak><p>双括号渲染：{{name}},年龄：{{age-2}}</p><p>js表达式：{{Math.abs(age)}}</p><p>js表达式：{{age>0?'a':age}}</p><!--v-text 文本渲染--><h3>v-text 文本渲染</h3><p v-text="name"></p><p v-text="age+100"></p><!--v-html --><h3>v-html 渲染</h3><p>v-text:<span v-text="htmlcontent"></span></p><p>v-html:<span v-html="htmlcontent"></span ></p><!--v-once 一次性插值 --><h3>v-html 渲染</h3><p v-once>这个值不会被改变：{{age}}<span>{{name}}</span></p></div><!--引入vue库--><script src="./node_modules/vue/dist/vue.global.js"></script><!--编写业务逻辑--><script type="text/javascript">const {createApp} = Vue;const app=createApp({data(){return{name:'helloworld',age: -200,htmlcontent:'<span style="color:red">哈哈哈哈<script>alert("aaaa")<\/script></span>'}}}).mount('#app');</script>
</body>
</html>

相关文章：

vue模版语法-{{}}/v-text/v-html/v-once

一、{{}}双括号&#xff1a;用于文本渲染 1、 {{变量名}}:data中返回对象的变量名 2、{{js表达式}}:可以直接进行js表达式处理 3、注意&#xff1a;双大括号中不要写等式书写 二、v-text 指令&#xff0c;用于文本渲染 1、为了解决双大括号渲染数据出现闪烁问题 三、v-cloak …...

编程日记 2023/10/8 9:55:31

前端埋点上传

没事看看&#xff1a; 从用户行为到数据&#xff1a;数据采集全景解析 | 人人都是产品经理 搭建前端监控&#xff0c;采集用户行为的 N 种姿势-前端监控设备 创业公司做数据分析&#xff08;三&#xff09;用户行为数据采集系统-CSDN博客...

编程日记 2023/10/8 9:54:30

第11章 Redis（一）

11.1 谈谈你对Redis的理解 难度：★★★ 重点：★★ 白话解析 对Redis的理解无非从三个方面去说一说：背景，是什么，特性。 背景：数据直接存磁盘太慢了，虽然MySQL用到了BufferPool等缓存，但是为了保证数据不丢失，MySQL采用的RedoLog依然要直接写磁盘。所以，数据的存储就…...

编程日记 2023/10/8 9:52:28

freertos信号量之二值信号量

freertos信号量之二值信号量 简介例程 简介 FreeRTOS的二值信号量&#xff08;Binary Semaphore&#xff09;是用于实现进程间同步和临界资源保护的重要工具。以下是一些二值信号量的常用函数及其说明&#xff1a; 1&#xff09;xSemaphoreCreateBinary() 创建一个二值信号量…...

编程日记 2023/10/8 9:50:26

notepad++ 如何去除换行

选中下方的“扩展” “查找目标”输入&#xff1a;\r\n&#xff0c;替换为:空白 最后全部替换。...

编程日记 2023/10/8 9:48:24

PPT NO.2 ​插入透明校徽

插入透明校徽&#xff1a; ①先下载一个校徽&#xff1a; ​ ②用矢量网站转换一下&#xff0c;这个免费的&#xff0c;很多其他的要钱钱&#xff1a; 位图转矢量图,JPG转矢量,PNG转矢量,GIF转矢量,BMP转矢量 - 在线工具 - 字客网 (fontke.com) 转换完了如下&#xff1a; 打…...

编程日记 2023/10/8 9:46:22

Linux系统部署PostgreSQL 单机数据库

安装方式 1 安装包方式 &#xff08;Packages and Installers&#xff09; 支持的操作系统包括 liunxMacosWindowsBSDSolaris 2 源码安装 &#xff08;Source code&#xff09; 下载源码包 通过下载地址PostgreSQL: File Browser 可以看到有各个版本的源码目录 选择13.1…...

编程日记 2023/10/8 9:42:19

好用的办公摸鱼神器

http://t.chaojizhu.cn/fawork/Down?uid180819...

编程日记 2023/10/8 9:37:14

手写Java序列化工具

一、思考 假设给一个java bean&#xff0c;让你按照 json 的格式打印出来&#xff0c;你会怎么做&#xff1f; 比如这个java bean 长这样&#xff0c;并且创建了一个叫宝儿姐的朋友 package com.test;public class User {private String name;private Integer age;private Bi…...

编程日记 2023/10/8 9:35:12

mysql面试题26：MySQL中什么是MVCC，它的底层原理是什么

该文章专注于面试，面试只要回答关键点即可，不需要对框架有非常深入的回答，如果你想应付面试，是足够了，抓住关键点 面试官：什么是MVCC，它的底层原理是什么？ MVCC（Multi-Version Concurrency Control）是一种并发控制机制，用于在数据库中实现并发事务的隔离性和一致性…...

编程日记 2023/10/8 9:34:11

SQL进阶 - SQL的编程规范

性能优化是一个很有趣的探索方向&#xff0c;将耗时耗资源的查询优化下来也是一件很有成就感的事情&#xff0c;但既然编程是一种沟通手段&#xff0c;那每一个数据开发者就都有义务保证写出的代码逻辑清晰&#xff0c;具有很好的可读性。 目录 引子 小试牛刀 答案 引言 …...

编程日记 2023/10/8 9:32:09

[NISACTF 2022]babyserialize - 反序列化+waf绕过【*】

[NISACTF 2022]babyserialize 一、解题过程二、思考总结&#xff08;一&#xff09;、关于题目的小细节&#xff08;二&#xff09;、关于弱类型比较技巧 一、解题过程 题目代码&#xff1a; <?php include "waf.php"; class NISA{public $fun"show_me_fl…...

编程日记 2023/10/8 9:31:08

docker部署Vaultwarden密码共享管理系统

Vaultwarden是一个开源的密码管理器&#xff0c;它是Bitwarden密码管理器的自托管版本。它提供了类似于Bitwarden的功能&#xff0c;允许用户安全地存储和管理密码、敏感数据和身份信息。 Vaultwarden的主要特点包括&#xff1a; 1. 安全的数据存储&#xff1a;Vaultwarden使…...

编程日记 2023/10/8 9:29:07

低代码开发技术选型

低代码的技术路径 低代码开发低代码开发优势低代码的技术路径1.表格驱动2.表单驱动3.数据模型4.领域模型 低代码的核心能力企业级低代码开发平台的11项关键能力低代码平台的流程引擎选型低代码平台的流程设计器选型低代码平台的表单设计器选型低代码平台的Vue.js 框架选型 低代…...

编程日记 2023/10/8 9:28:05

在vue2中，v-model和.sync的区别

最近在封装一个弹窗组件时&#xff0c;用了比较复杂的逻辑去做显示和隐藏的逻辑&#xff0c;在查看同事的代码之后&#xff0c;才知道还有更简单的方法&#xff0c;自己已经忘了一些API. popup组件里统一的template&#xff1a; <div v-ifisShowPopup> // 弹窗内容 <…...

编程日记 2023/10/8 9:27:03

nginx 配置

一、nginx安装 下载地址&#xff1a;http://nginx.org/en/download.html&#xff0c;和Keepalived搭配使用&#xff0c;防止nginx挂掉 二、nginx配置 ########### 每个指令必须有分号结束。################# #user administrator administrators; #配置用户或者组&#xf…...

编程日记 2023/10/8 9:26:02

【计算机视觉|人脸建模】学习从图像中回归3D面部形状和表情而无需3D监督

本系列博文为深度学习/计算机视觉论文笔记&#xff0c;转载请注明出处 标题&#xff1a;Learning to Regress 3D Face Shape and Expression from an Image without 3D Supervision 链接&#xff1a;[1905.06817] Learning to Regress 3D Face Shape and Expression from an I…...

编程日记 2023/10/8 9:25:01

Linux系统之部署h5ai目录列表程序

Linux系统之部署h5ai目录列表程序 一、h5ai介绍1.1 h5ai简介1.2 h5ai特点 二、本地环境介绍2.1 本地环境规划2.2 本次实践介绍 三、检查本地环境3.1 检查本地操作系统版本3.2 检查系统内核版本 四、安装httpd软件4.1 检查yum仓库4.2 安装httpd软件4.3 启动httpd服务4.4 查看htt…...

编程日记 2023/10/8 9:24:00

Java-Exception

目录 异常概念ErrorException 体系图常见运行时异常NullPointerExceptionArithmeticExceptionArrayIndexOutOfBoundExceptionClassCastExceptionNumberFormatException 常见的编译异常异常处理机制自定义异常throw和throws对比 异常是Java编程中的常见问题&#xff0c;了解如何…...

编程日记 2023/10/8 9:22:59

C++并发与多线程(2) | 线程运行开始和结束的基本方式

当程序运行起来，生成一个进程，该进程所属的主线程开始自动运行。当主线程从main()函数返回，则整个进程执行完毕。 主线程从main()开始执行，那么我们自己创建的线程，也需要从一个函数开始运行（初始函数），一旦这个函数运行完毕，就代表着我们这个线程运行结束。 整个进…...

编程日记 2023/10/8 9:21:58

vue3前端开发-flex布局篇

文章目录 1.传统布局与flex布局优缺点传统布局flex布局建议 2. flex布局原理2.1 布局原理 3. flex常见属性3.1 父项常见属性3.2 子项常见属性 4.案例实战(携程网首页) 1.传统布局与flex布局优缺点 传统布局 兼容性好布局繁琐局限性&#xff0c;不能再移动端很好的布局 flex布…...

编程日记 2023/10/8 9:20:57

网络是什么？(网络零基础入门篇)

1.如何理解局域网和广域网&#xff1f; 2.路由器和交换机是怎么样工作的&#xff1f; 3.三层交换机能不能代替路由器&#xff1f; -- 局域网 广域网 -- 企业网架构&#xff0c;运营商架构&#xff0c;数据中心架构 -- 局域网 通过 交换机连接的 转发 相同的ip地址…...

编程日记 2023/10/8 9:16:52

【JavaEE】线程安全的集合类

文章目录 前言多线程环境使用 ArrayList多线程环境使用队列多线程环境使用哈希表1. HashTable2. ConcurrentHashMap 前言 前面我们学习了很多的Java集合类&#xff0c;像什么ArrayList、Queue、HashTable、HashMap等等一些常用的集合类&#xff0c;之前使用这些都是在单线程中…...

编程日记 2023/10/8 9:13:49

【C++算法】is_partitioned、partition_copy和partition_point

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、is_partitioned函数&#xff1a;1.1 is_partitioned是什么&#xff1f;1.2 函数原型1.3 示例代码1.4 更多示例代码 二、partition_copy函数2.1 概念2.2 函数…...

编程日记 2023/10/8 9:10:47

MyBatis（JavaEE进阶系列4）

目录 前言&#xff1a; 1.MyBatis是什么 2.为什么要学习MyBatis框架 3.MyBatis框架的搭建 3.1添加MyBatis框架 3.2设置MyBatis配置 4.根据MyBatis写法完成数据库的操作 5.MyBatis里面的增删改查操作 5.1插入语句 5.2修改语句 5.3delete语句 5.4查询语句 5.5like查…...

编程日记 2023/10/8 9:08:45

『力扣每日一题15』：买卖股票的最佳时机

一、题目 给定一个数组 prices &#xff0c;它的第 i 个元素 prices[i] 表示一支给定股票第 i 天的价格。 你只能选择 某一天 买入这只股票&#xff0c;并选择在 未来的某一个不同的日子 卖出该股票。设计一个算法来计算你所能获取的最大利润。 返回你可以从这笔交易中获取的…...

编程日记 2023/10/8 9:07:44

Java中栈实现怎么选？Stack、Deque、ArrayDeque、LinkedList（含常用Api积累）

目录 Java中的Stack类 不用Stack有以下两点原因 1、从性能上来说应该使用Deque代替Stack。 2、Stack从Vector继承是个历史遗留问题&#xff0c;JDK官方已建议优先使用Deque的实现类来代替Stack。 该用ArrayDeque还是LinkedList&#xff1f; ArrayDeque与LinkList区别&#xff1…...

编程日记 2023/10/8 9:06:43

雷达分辨率单元、单向/双向雷达方程、天气雷达方程简介

一、点状目标 如果两个点状目标在一个分辨率单元中，经典脉冲雷达只能看到一个目标。 点状目标 二、雷达距离分辨率 对于简单的键控开/关脉冲调制： 对于使用脉冲内调制的雷达，距离分辨率取决于压缩脉冲的脉冲持续时间。脉冲压缩比（PCR）取决于传输带宽BWtx，即距离分辨率取…...

编程日记 2023/10/8 9:05:42

RabbitMQ之Fanout（扇形） Exchange解读

目录 基本介绍 适用场景 springboot代码演示 演示架构 工程概述 RabbitConfig配置类&#xff1a;创建队列及交换机并进行绑定 MessageService业务类&#xff1a;发送消息及接收消息 主启动类RabbitMq01Application&#xff1a;实现ApplicationRunner接口 基本介绍 Fa…...

编程日记 2023/10/8 9:04:42

Redisson—分布式集合详述

7.1. 映射&#xff08;Map&#xff09; 基于Redis的Redisson的分布式映射结构的RMap Java对象实现了java.util.concurrent.ConcurrentMap接口和java.util.Map接口。与HashMap不同的是&#xff0c;RMap保持了元素的插入顺序。该对象的最大容量受Redis限制&#xff0c;最大元素数…...

编程日记 2023/10/8 9:03:40

wordpress制作游戏/新闻投稿

引言 数据库的设计范式是数据库设计所需要满足的规范&#xff0c;满足这些规范的数据库是简洁的、结构明晰的&#xff0c;同时&#xff0c;不会发生插入&#xff08;insert&#xff09;、删除&#xff08;delete&#xff09;和更新&#xff08;update&#xff09;操作异常。反之…...

编程日记 2025/1/16 12:49:15

网站开发合同/alexa全球网站排名分析

在群里和大家交流时&#xff0c;看到太多的网页设计师发布企业站的个人作品&#xff0c;设计中总是摆脱不了大框套小框的设计布局思路&#xff0c;不加思索的跳入单一的网页布局形式中&#xff0c;于是就有了把企业站常用的页面布局方式总结一下的想法&#xff0c;让大家包括我…...

编程日记 2025/1/16 12:11:45

南京网站制作学校/此网站不支持下载视频怎么办

《安卓市场旧版本》一款好用功能又多的手机软件商店&#xff0c;《安卓市场旧版本》应用业界先进技术&#xff0c;压缩数据节省流量&#xff0c;体验Android手机无限精彩。特设社交功能&#xff0c;用户可通过微博、短信、云推送等方式与好友分享软件&#xff01;官方介绍《安卓…...

编程日记 2025/1/16 11:49:30

做网站需要哪些步骤/百度网盘电脑版下载

2019独角兽企业重金招聘Python工程师标准>>> linux系统查看所有服务的命令 以前用过这么命令运行后可以在linux系统查看所有服务的命令是什么&#xff0c;有一个文本菜单&#xff0c;可以很方面的选择启动或者停止服务&#xff0c;诸如ftp, ssh, telnet之类的但是我…...

编程日记 2025/1/16 11:09:37

云南定制化网站建设/seopeix

题意&#xff1a; 用n个木棒凑成数字&#xff0c;和最大是多少 思路&#xff1a; 直接dp写。 #include<cmath> #include<cstdio> #include<cstring> #include<algorithm> #include<iostream>typedef long long ll; using namespace std; const…...

编程日记 2025/1/16 8:19:40

网络营销类型有哪些/seo推广策略

#define UsartRxBuffAddressArmEntry 0X20001000 #define UsartRxBuffSize 0x400 unsigned char USART_RX_BUF[UsartRxBuffSize ] __ attribute __((at(UsartBuffAddressArmEntry ))); //将串口接收的数据定位存放到RAM中地址为0X20001000–0x200013FF 中&#xff1b; #defin…...

编程日记 2025/1/16 6:58:28