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/vue@2.6.11"></script>
		<script>
			new Vue({
				el: "#app",
				data: {
					msg: "Hello Vue",
				},
			});
		</script>
	</body>
</html>

变成这样

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

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

相关推荐
陈随易9 小时前
在 VSCode 里,把项目一键部署到服务器
前端·后端·程序员
Highcharts.js9 小时前
教程:基于 React + Highcharts 构建一个单页应用程序、按需数据拉取与图表渲染
开发语言·前端·数据结构·react.js·前端框架·highcharts·页面应用
To_OC10 小时前
我被 useState 坑了两次之后,终于把它的脾气摸透了
前端·javascript·react.js
鱼樱前端10 小时前
我用 Claude Code 后,编码效率翻 3 倍。但更值钱的是别的。
前端·后端·ai编程
_lucas10 小时前
给知识库网站接入AI问答
前端·ai编程·全栈
前端糕手11 小时前
前端面试题大全:JavaScript + Vue3 + React + TypeScript + 工程化 + 性能优化
前端
我不叫武12 小时前
一个用 Rust 写的离线编码查询桌面工具
前端
Web4Browser13 小时前
指纹浏览器 API 自动化怎么接:启动 Profile、获取 CDP 端点并连接自动化框架
前端·网络·typescript·自动化
Patrick_Wilson13 小时前
从 React 到 Flutter:写给前端的一张跨端知识地图
前端·flutter·react.js
颜酱13 小时前
06 | 把 meta_config 同步进 MySQL(生成阶段)
前端·人工智能·后端