Vue 3_1.vue中的v-text和v-html以及v-bind的使用

最新推荐文章于 2024-03-24 16:46:14 发布

杰克L

最新推荐文章于 2024-03-24 16:46:14 发布

阅读量3k

点赞数

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

本文链接：https://blog.csdn.net/weixin_46503633/article/details/117408480

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

v-text直接以纯文本展示
v-html则会解析html标签

在我们项目中的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="jieke">
			<div v-text="message"></div> //用v-text引用message的值
			<div v-html="message"></div> //用v-html引用message的值
		</div>
	</body>
	<script>
		new Vue({
			el: "#jieke", //接管id名为jieke的区域
			data: {
				message: "<h1>Hello Vue</h1>"  //message的值
			}
		})
	</script>
</html>

运行结果：
在这里插入图片描述

v-text直接以纯文本形式展示message的值
v-html则会解析html

v-bind:

插值表达式不能用于html标签的属性取值，要想给html标签的属性设置变量的值，需要使用v-bind。
v-bind也可以简化写法，直接使用：
接下来是我们html中的代码：

<!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="jieke">
			<font v-bind:color="ys1">Hello</font> //使用v-bind给属性绑定ys1的值
			<font :color="ys2">Vue</font> //使用v-bind给属性绑定ys2的值
		</div>
	</body>
	<script>
		new Vue({
			el: "#jieke", //接管id名为jieke的区域
			data:{
				ys1:"blue",
				ys2:"red"
			}
		});
	</script>
</html>

运行结果：
在这里插入图片描述

杰克L

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 3_1.vue中的v-text和v-html以及v-bind的使用

v-text直接以纯文本展示v-html则会解析html标签在我们项目中的html中添加以下代码：<html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body&g
复制链接

扫一扫