Vue渲染内容的三种方式

{{ }} 语法:将数据作为普通文本输出,不会覆盖原有的内容。

v-text 指令:将数据作为普通文本输出,会覆盖原有的内容。

v-html 指令:将数据作为 HTML 标签解析后输出,会覆盖原有的内容。

注:一定要在可信的内容上使用 v-html,永远不要在用户提交的内容上使用,避免坏人利用动态渲染,获取用户的 cookie 进行 XSS 攻击。

语法格式:

<div>{{ 数据 }}</div><div v-text="数据"></div><div v-html="数据"></div>

渲染普通文本

<template><h3 v-pre>使用 {{ }} 语法渲染</h3><p>{{ data }}</p><hr /><h3>使用 v-text 语法渲染</h3><p v-text="data"></p><hr /><h3>使用 v-html 语法渲染</h3><p v-html="data"></p><hr />
</template><script setup>
import { ref } from "vue";
let data = ref("你好呀!");
</script>

:v-text 和 v-html 必须在空标签中使用,不允许有其它内容,否则就会报错。 

渲染富文本

<template><h3 v-pre>使用 {{ }} 语法渲染</h3><p>{{ data }}</p><hr /><h3>使用 v-text 语法渲染</h3><p v-text="data"></p><hr /><h3>使用 v-html 语法渲染</h3><p v-html="data"></p><hr />
</template><script setup>
import { ref } from "vue";
let data = ref("<b>我是b标签</b>");
</script>

:只有 v-html 可以将数据中的 HTML 标签解析渲染到页面中。 

渲染 JS 表达式

<template><h3 v-pre>使用 {{ }} 语法渲染</h3><p>{{ data * 10 }}</p><hr /><h3>使用 v-text 语法渲染</h3><p v-text="data * 10"></p><hr /><h3>使用 v-html 语法渲染</h3><p v-html="data * 10"></p><hr /><button @click="data++">点击加一</button>
</template><script setup>
import { ref } from "vue";
let data = ref(1);
</script>

:可以编写任意的 JS 表达式,并且数据改变后,页面就会自动更新。

原创作者:吴小糖

创建时间:2023.12.1 

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

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

相关文章

flutter开发实战-ValueListenableBuilder实现局部刷新功能

flutter开发实战-ValueListenableBuilder实现局部刷新功能 在创建的新工程中&#xff0c;点击按钮更新counter后&#xff0c;通过setState可以出发本类的build方法进行更新。当我们只需要更新一小部分控件的时候&#xff0c;通过setState就不太合适了&#xff0c;这就需要进行…

OSI七层模型与TCP/IP四层模型的区别(计算机网络)

一、OSI七层网络模型 OSI 网络模型共有 7 层&#xff0c;分别是应用层、表示层、会话层、传输层、网络层、数据链路层和物理层。 应用层&#xff0c;负责给应用程序提供统一的接口&#xff1b;表示层&#xff0c;负责把数据转换成兼容另一个系统能识别的格式&#xff1b;会话…

NDK打印android日志

首先在cpp文件中 引入 #include <android/log.h> 然后就可以使用 __android_log_print方法&#xff0c;第一个参数是log level&#xff0c;第二个是tag&#xff0c;第三个是日志内容。 #include <jni.h> #include <string> #include <android/log.h&g…

Syntax Error: TypeError: Cannot read properties of undefined (reading ‘styles‘)

日志只有这一行&#xff0c;比较难排查 排查途径&#xff1a; 1、从上图找到唯一的文件输出output.js&#xff0c;断点查看堆栈信息&#xff0c;如下图&#xff0c;可以看到这个错误是由于哪个文件引起的 以为从App.vue中定位到原因了&#xff0c;其实也不对&#xff0c;继续…

nnDetection简明安装和训练流程(Windows环境)

安装 首先&#xff0c;官方不建议Windows安装&#xff0c;推荐Linux Docker 我的环境&#xff1a; ● 操作系统平台&#xff1a; Windows 10 ● Python&#xff1a; 3.8 ● Torch/TorchVision&#xff1a; 1.10.1cu102/ 0.11.1 ● GPU&#xff1a; Nvidia RTX 2080 Ti 11G…

FTP协议详解

一&#xff1a;概述 FTP协议是一个用于在计算机网络上在客户端和服务器之间进行文件传输的应用层协议&#xff0c;其英文全称是File Transfer Protocol。是TCP/IP协议簇中的重要一员。客户端和服务器按照FTP的协议规范进行通讯来实现文件传输。 对于FTP服务器好理解&#xff0c…

B.牛牛排队伍——模拟双链表

当前位置: 首页 > news >正文 B.牛牛排队伍——模拟双链表 news 2023/12/1 15:14:37 分析 题目其实很简单,就是双链表的增删查,但是刚开始,直接vis标记删除元素,查找一个位置的前一个用的while不断向前找,但是TLE;毕竟O(n*k)的复杂度,一开始没有考虑时间复杂度…

2023第十二届“认证杯”数学中国数学建模国际赛赛题A完整解析

A题完整题解 写在前面假设数据预处理 问题一1 基于自适应ARIMA-BP神经网络模型的影响因素预测1.1 ARIMA模型的建立1.2 BP神经网络模型的建立1.3 基于GABP神经网络的预测模型构建1.4 自适应混合ARIMA-BP神经网络模型的建立1.5 模型求解 代码Q1_1.mQ1_2.m 完整代码与论文获取 写在…

如何快速选出一支好股票?

俗话说得好&#xff1a;股票选得好&#xff0c;收益少不了&#xff01;不用多说&#xff0c;相信大伙儿都知道选一支好股票究竟有多重要。 但是选股可不像咱们去菜市场买菜一样&#xff0c;看着顺眼就成。选股&#xff0c;其实是一个专业性特别强的技术活儿。 目前最常用的选股…

CoreDns在K8S中的作用原理概述

在Kubernetes中&#xff0c;CoreDNS是一款用于DNS解析的开源软件&#xff0c;它被广泛用于实现Kubernetes集群内部的服务发现和域名解析功能。CoreDNS提供了灵活的插件体系&#xff0c;可以通过插件来实现各种功能&#xff0c;包括内部Service域名解析。 在Kubernetes集群中&a…

xcode swiftui项目添加依赖

打开项目targets——Build Phases 点击“” 属于Apple SDKs的依赖可以直接添加 其他依赖需要在 Add Other中添加&#xff0c;在右上角用名字搜索或者URL地址(如GitHub上插件的地址)搜索,然后添加&#xff0c;也可添加本地文件

HarmonyOS通过OpenGL渲染显示yuv数据

一、UI页面render_page.ets Column() {XComponent({id: "XComponent88",type: XCompentConstants.XCOMPONENT_TYPE,libraryname: XCompentConstants.XCOMPONENT_LIBRARY_NAME}).width(640).height(360).onLoad((xComponentContext?: object | Record<string, () …

【RPC】基础

RPC 基本概念组成存在的问题python实现 基本概念 RPC是一个计算机通信协议&#xff0c;允许运行在一台计算机的程序调用另一台计算机的子程序&#xff0c;允许调用远程服务&#xff0c;是一个C/S模式。下图是百度百科的信息&#xff0c;可以看到&#xff0c;它的作用就是我想用…

history和hash两种路由模式原理,和优缺点

Hash Hash 模式是在 URL 中使用井号&#xff08;#&#xff09;来作为路由的模式。在 Hash 模式下&#xff0c;即使页面刷新&#xff0c;浏览器仍然只会请求页面的初始 HTML 文件&#xff0c;所有的路由变化都会在 URL 前面添加 “#/” 符号。 原理 在 Hash 模式下&#xff0c;路…

gitlab高级功能之CI/CD组件 - 实践(二)

上一篇主要讲解了CI/CD组件的原理&#xff0c;看起来稍微有一点枯燥&#xff0c;那么接下来给大家演示下如何使用。 案例 创建一个项目&#xff08;README.md&#xff0c;template目录&#xff09; 案例1 step1: 在template中新建yml文件&#xff0c;cat templates/test-st…

Verilog 入门(六)行为建模

文章目录 过程结构initial 语句always 语句 事件控制语句块顺序语句块并行语句块 过程性赋值阻塞性过程赋值非阻塞性过程赋值 过程结构 下述两种语句是为一个设计的行为建模的主要机制&#xff1a; initial 语句always 语句 一个模块中可以包含任意多个 initial 或 always 语…

C/C++11 语法/概念易错总结(1)

文章目录 缺省参数函数重载引用引用和指针内联宏的优缺点auto范围forNULL和nullptr 缺省参数 半缺省参数必须从右往左依次来给出&#xff0c;不能间隔着给 void Func(int a, int b 10, int c 20){cout<<"a "<<a<<endl;cout<<"b &…

一些ab命令

1.ab简介 ab是apache自带的压力测试工具&#xff0c;是apachebench命令的缩写。ab非常实用&#xff0c;它不仅可以对apache服务器进行网站访问压力测试&#xff0c;也可以对或其它类型的服务器如nginx、tomcat、IIS等进行压力测试。 ab的原理&#xff1a;ab命令会创建多个并发…

在编程中遇到的问题总结

IDEA空包粘黏问题 创建好目录以后会发现idea自动将空包合并在一起了&#xff0c;而且点击设置里面也没有Compact Middle Package Compact Middle Package如果不在设置的主面板上&#xff0c;则点击Tree Appearance&#xff0c;会发现Compact Middle Package在Tree Appearance里…

elupload base64

创作灵感也许就是这会儿还没有入睡吧&#xff0c;对接百度图片OCR功能&#xff0c;需要将图片转为BASE64上传调用百度的接口api&#xff0c;进行研究实现。页面如下&#xff0c;点击后选择图片文件后不是直接上传&#xff0c;而是获取图片的bytes数据&#xff01; <el-uploa…