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

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

       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>

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

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

相关文章

MyBatisPlus(八)范围查询

说明 范围查询&#xff0c;包括&#xff1a; 大于大于等于小于小于等于在范围内在范围外 大于&#xff1a;gt 代码 Testvoid gt() {LambdaQueryWrapper<User> wrapper new LambdaQueryWrapper<>();wrapper.gt(User::getAge, 20);List<User> users mapp…

Zookeeper经典应用场景实战(一)

文章目录 1、Zookeeper Java客户端实战1.1、 Zookeeper 原生Java客户端使用1.2、 Curator开源客户端使用 2、 Zookeeper在分布式命名服务中的实战2.1、 分布式API目录2.2、 分布式节点的命名2.3、 分布式的ID生成器 3、Zookeeper实现分布式队列3.1、 设计思路3.2、 使用Apache …

大文件上传,前端vue 做分片上传

html – 以弹窗的形式 <!-- 上传算法文件 --> <el-dialog title"上传算法文件" :visible.sync"uploadPop" width"60%" :close-on-click-modal"false" :before-close"closeUploadPop" append-to-body custom-class…

2023.10.07

#include <iostream>using namespace std;int main() {string str;cout << "请输入字符串&#xff1a;";getline(cin,str);int big0,little0,spac0,num0,sym0;int sizestr.size();for(int i0;i<size;i){if((int)str.at(i)<6526 && (int)st…

如何开发一款高效便捷的搬家服务小程序

随着互联网的发展&#xff0c;小程序已成为各行各业重要的业务推广和用户服务平台。对于搬家行业而言&#xff0c;开发一款高效便捷的搬家服务小程序具有巨大的市场潜力。本文将为您详细介绍如何开发一款这样的搬家服务小程序。 一、进入乔拓云网后台 在开始制作搬家服务小程序…

ICE综述

ICE综述 ICE(Internet Communications Engine)是ZeroC提供的一款高性能的中间件&#xff0c;基于ICE可以实现电信级的解决方案。在设计网站架构的时候可以使用ICE实现对网站应用的基础对象操作&#xff0c;将基础对象操作和数据库操作封装在这一层&#xff0c;在业务逻辑层以及…

Pyside6 安装和简单界面开发

Pyside6 安装和简单界面开发 Pyside6介绍Pysied6开发环境搭建Python安装Pysied6安装 Pyside6界面开发简单界面设计界面设计界面编译 编写界面初始化代码软件打包 Pyside6介绍 对于Python的GUI开发来说&#xff0c;Python自带的可视化编程模块的功能较弱&#xff0c;PySide是跨…

【11】c++设计模式——>单例模式

单例模式是什么 在一个项目中&#xff0c;全局范围内&#xff0c;某个类的实例有且仅有一个&#xff08;只能new一次&#xff09;&#xff0c;通过这个唯一的实例向其他模块提供数据的全局访问&#xff0c;这种模式就叫单例模式。单例模式的典型应用就是任务队列。 为什么要使…

12P2532X162-233A KJ3222X1-BA1 CE4003S2B3 EMERSON CONTROLLER

12P2532X162-233A KJ3222X1-BA1 CE4003S2B3 EMERSON CONTROLLER EDGEBoost I/O模块是一种可扩展的模块化解决方案&#xff0c;集成到Premio的工业计算机中&#xff0c;通过即插即用的可扩展性提供增强的可靠性。这些附加模块有助于解决在加固边缘出现的设计限制和兼容性问题。…

JDBC-day01(JDBC概述,获取数据库连接)

一&#xff1a;JDBC概述 1.数据持久化 持久化(persistence)&#xff1a;把数据保存到可掉电式存储设备中以供之后使用。大多数情况下&#xff0c;数据持久化意味着将内存中的数据保存到硬盘上加以”固化”&#xff0c;而持久化的实现过程大多通过各种关系数据库来完成。简单来…

gorm 自定义时间、字符串数组类型

文章目录 自定义时间类型自定义字符串数组测试与完整代码测试代码测试结果 GORM 是GO语言中一款强大友好的ORM框架&#xff0c;但在使用过程中内置的数据类型不能满足以下两个需求&#xff0c;如下&#xff1a; time.Time类型返回的是 2023-10-03T09:12:08.5352808:00这种字符串…

美国各流域边界下载,并利用arcgis提取与处理

一、边界数据的下载 一般使用最普遍的流域边界数据是从HydroSHEDS官网下载: HydroBASINS代表一系列矢量多边形图层&#xff0c;以全球尺度呈现次级流域边界。该产品的目标是提供一种无缝的全球覆盖&#xff0c;其中包含了不同尺度&#xff08;从数十到数百万平方千米&#xf…

Zygote Secondary:加速应用启动的未来之路

Zygote Secondary&#xff1a;加速应用启动的未来之路 1. 引言 在现代的移动应用开发中&#xff0c;启动速度和响应性能是用户体验的重要方面。然而&#xff0c;传统的 Android 进程管理方式在启动应用时会出现性能瓶颈&#xff0c;导致启动时间过长和资源占用过多。为了解决…

Linux基本指令(中)——“Linux”

各位CSDN的uu们好呀&#xff0c;今天&#xff0c;小雅兰的内容是Linux基本指令呀&#xff01;&#xff01;&#xff01;下面&#xff0c;让我们进入Linux的世界吧&#xff01;&#xff01;&#xff01; cp指令&#xff08;重要&#xff09; mv指令&#xff08;重要&#xff09…

“益路同行”栏目专访 第06期—小星星关爱联盟创始人魏洁荣老师

中国善网在本届&#xff08;第十届&#xff09;慈展会上特别推出了《益路同行》采访栏目&#xff0c;《益路同行》栏目旨在寻觅公益之路上同行者的故事&#xff0c;挖掘公益更深层次的内涵&#xff0c;探索新时代公益发展道路。希望公益企业、人物、故事被更多人看到&#xff0…

外卖小程序源码vs定制开发:何时选择哪种方式?

在数字餐饮行业的蓬勃发展中&#xff0c;外卖应用程序已经成为餐厅和创业者的必备工具。然而&#xff0c;当涉及到开发外卖应用程序时&#xff0c;您会面临一个重要的决策&#xff1a;是使用外卖小程序源码还是进行定制开发&#xff1f;这两种方法各有优势和劣势&#xff0c;取…

【刷题笔记10.5】LeetCode:排序链表

LeetCode&#xff1a;排序链表 一、题目描述 给你链表的头结点 head &#xff0c;请将其按 升序 排列并返回 排序后的链表 。 二、分析 这题咱们默认要求&#xff1a;空间复杂度为O(1)。所以这把咱们用自底向上的方法实现归并排序&#xff0c;则可以达到O(1) 的空间复杂…

【itext7】使用itext7将多个PDF文件、图片合并成一个PDF文件,图片旋转、图片缩放

这篇文章&#xff0c;主要介绍使用itext7将多个PDF文件、图片合并成一个PDF文件&#xff0c;图片旋转、图片缩放。 目录 一、itext7合并PDF 1.1、引入依赖 1.2、合并PDF介绍 1.3、采用字节数组方式读取PDF文件 1.4、合并多个PDF文件 1.5、合并图片到PDF文件 1.6、旋转图…

王杰C++day1

#include <iostream>using namespace std;int main() {cout << "输入一个字符串&#xff1a;" << endl;string str;int a 0,b 0,c 0,d 0,e 0;getline(cin,str);for(int i 0;i < (int)str.size();i){if(str[i] > A && str[i] &…

接口自动化测试介入项目管理流程

上图为接口自动化测试介入梧桐项目管理流程图 前景和目标&#xff1a; 现在公司的项目流程都是全部开发完成后提交到测试环境进行测试&#xff0c;导致测试人员在开发编码过程中相对清闲&#xff0c;除了完成测试用例之外没有其他事情可做&#xff0c;而当进入测试阶段又会变…