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原样输出

相关推荐
мо仙堡杠把子ご灬6 小时前
微前端架构实践:避免Vuex模块重复注册的崩溃陷阱
前端
叫我:松哥6 小时前
基于机器学习的地震风险评估与可视化系统,采用Flask后端与Bootstrap前端,系统集成DBSCAN空间聚类算法与随机森林算法
前端·算法·机器学习·flask·bootstrap·echarts·聚类
呆头鸭L7 小时前
用vue3+ts+elementPlus+vite搭建electron桌面端应用
前端·vue.js·electron
aPurpleBerry7 小时前
React Hooks(数据驱动、副作用、状态传递、状态派生)
前端·react.js·前端框架
IT_陈寒7 小时前
2025年React生态最新趋势:我从Redux迁移到Zustand后性能提升40%的心得
前端·人工智能·后端
前端小臻7 小时前
react没有双向数据绑定是怎么实现数据实时变更的
前端·javascript·react.js
困惑阿三7 小时前
CSS 动效交互实验室
前端·css
哟哟耶耶7 小时前
随笔小计-前端经常接触的http响应头(跨域CORS,性能-缓存-安全,token)
前端·网络协议·http
Allen_LVyingbo7 小时前
病历生成与质控编码的工程化范式研究:从模型驱动到系统治理的范式转变
前端·javascript·算法·前端框架·知识图谱·健康医疗·easyui