Vue学习笔记——text，html语法以及区别

最新推荐文章于 2024-08-19 21:37:53 发布

渣渣圆

最新推荐文章于 2024-08-19 21:37:53 发布

阅读量515

点赞数

分类专栏： Vue 文章标签： vue html js

本文链接：https://blog.csdn.net/weixin_44154577/article/details/114380388

版权

Vue 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

Vue-text

<body>
		<div id="app">
			{{message}}
			<h2 v-text="name+'呀'"></h2>
			<h2>{{message}},袁画圆</h2>
			<h2 v-text="message">啊啊啊</h2>
		</div>
		<script>
		var app =new Vue({
			el:"#app",
			data:{
				message:"hello",
				name:"袁画圆"
			}
		})
		</script>

运行截图

V-text的作用相当于原生js中的innerText
将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题（如果数据中有HTML标签会将html标签一并输出），会将原有标签有的内容覆盖掉

V-html

<div id="app"> 
	<p v-text="content"></p>
	<p v-html="content"></p> <!-- v-html可以用来放超链接,设置元素的innerHTML -->
	</div>
	<body>
		<script>
			var app =new Vue({
				el:"#app",
				data:{
					content:"<a href='http://www.baidu.com'>百度</a>"
				}
			})
		</script>