v-text和v-html以及v-bind的使用

最新推荐文章于 2024-06-22 14:33:40 发布

有点胖的程序猿

最新推荐文章于 2024-06-22 14:33:40 发布

阅读量1k

点赞数

分类专栏： veu.js

本文链接：https://blog.csdn.net/weixin_44552128/article/details/108279113

版权

本文介绍了Vue中v-text、v-html和v-bind的使用方法。v-text用于显示纯文本并支持单向数据绑定，不解析HTML。v-html则能解析HTML标签并输出。v-bind用于动态绑定HTML标签的属性，实现属性值与数据对象的联动。

摘要由CSDN通过智能技术生成

v-text： v-text是用于操作纯文本，它会替代显示对应的数据对象上的值。当绑定的数据对象上的值发生改变，插值处的内容也会随之更新。注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值。其中：v-text可以简写为{ {}},并且支持逻辑运算。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<div v-text="message"></div>
		</div>
		<script>
			new  Vue({
				el:'#app',
				data:{
					message:"hello word!!"
				}
			})
		</script>
	</body>
</html>

v-html：操作元素中的HTML标签，v-text会将元素当成纯文本输出而v-html会将元素当成HTML标签解析后输出, 它与v-text区别在于v-text输出的是纯文本，