Vue中的v-text和v-html区别

最新推荐文章于 2024-05-09 18:04:48 发布

張bh吖

最新推荐文章于 2024-05-09 18:04:48 发布

阅读量166

点赞数

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

本文链接：https://blog.csdn.net/m0_46590655/article/details/122469983

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue中的v-text和v-html区别(这里写自定义目录标题)

v-text

代码片.

<body>
		<ul class="app">
			<li>{{title}}</li>
			<li>{{name}}</li>
			<li v-text= "sex"></li>
		</ul>
	</body>
		<script>
		const vm = new Vue({
			el: ".app",
			data: {
				sex: "sex1",
				title: "sex",
				name: "zhang"		
			}
		})
		</script>

得到显示结果：
结果显示为

v-html（防转义，识别HTML标签）

代码片.

<body>
		<ul class="app">
			<li v-html="str"></li>
		</ul>
	</body>
		<script>
		const vm = new Vue({
			el: ".app",
			data: {
				str: "<h1>hello! my name is zhang</h1>",
				
			}
		})
		</script>

得到显示结果：

tips: 写data内的数据时要注意字符形式

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

張bh吖

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中的v-text和v-html区别

Vue中的v-text和v-html区别(这里写自定义目录标题)v-text代码片.<body> <ul class="app"> <li>{{title}}</li> <li>{{name}}</li> <li v-text= "sex"></li> </ul> </body> <script> const vm = new Vue(
复制链接

扫一扫