v-text 和v-html

接下来,我讲介绍一下v-text和v-html的使用方式以及它们之间的区别。

使用方法

html 复制代码
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<div id="app">
			<p v-text="msg"></p>
			<p v-html="msg"></p>
			<p>{{msg}}</p>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
		<script>
			new Vue({
				el: "#app",
				data: {
					msg: "Hello Vue",
				},
			});
		</script>
	</body>
</html>

变成这样

v-text和v-html起了插值表达式{{}}作用,将msg中的信息显示在视图中。那它们之间有什么不同?请看下面代码

我们可以清晰的知道,在v-html的运行中,它解析了HTML代码。而v-text并没有解析,它将msg原样输出

相关推荐
uhakadotcom2 分钟前
Caddy Web服务器初体验:简洁高效的现代选择
前端·面试·github
前端菜鸟来报道4 分钟前
前端react 实现分段进度条
前端·javascript·react.js·进度条
花楸树28 分钟前
前端搭建 MCP Client(Web版)+ Server + Agent 实践
前端·人工智能
wuaro28 分钟前
RBAC权限控制具体实现
前端·javascript·vue
专业抄代码选手33 分钟前
【JS】instanceof 和 typeof 的使用
前端·javascript·面试
用户00798136209733 分钟前
6000 字+6 个案例:写给普通人的 MCP 入门指南
前端
用户876128290737438 分钟前
前端ai对话框架semi-design-vue
前端·人工智能
干就完了141 分钟前
项目中遇到浏览器跨域前端和后端解决方案以及大概过程
前端
我是福福大王43 分钟前
前后端SM2加密交互问题解析与解决方案
前端·后端
实习生小黄1 小时前
echarts 实现环形渐变
前端·echarts