vue 2.0 v-text & v-html

最新推荐文章于 2022-08-02 15:13:43 发布

嘿丷如歌

最新推荐文章于 2022-08-02 15:13:43 发布

阅读量356

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 从入门到放弃

本文链接：https://blog.youkuaiyun.com/qq_35776392/article/details/78345873

vue 从入门到放弃专栏收录该内容

10 篇文章

订阅专栏

本文通过两个示例介绍了Vue.js中v-text与v-html指令的基本用法。v-text用于更新元素的textContent，而v-html则用于更新元素的innerHTML。示例展示了如何使用这些指令显示文本和HTML内容。

1：v-text

说明：操作纯文本元素

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<link rel="stylesheet" href="css/bootstrap.css">
		<script src="js/jquery-3.2.1.min.js"></script>
		<script src="js/bootstrap.js"></script>
		<script src="js/vue.js"></script>
		<script>
			window.onload = function() {
				new Vue({
					el: '#box',
					data: {
						msg: "谁在悬崖沏一壶茶"
					}
				})
			}
		</script>
	</head>

	<body>
		<div id="box">
			<span>{{msg}}</span></br>
			<span v-text="msg"></span></br>
		</div>
	</body>

</html>

2：v-html

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<link rel="stylesheet" href="css/bootstrap.css">
		<script src="js/jquery-3.2.1.min.js"></script>
		<script src="js/bootstrap.js"></script>
		<script src="js/vue.js"></script>
		<script>
			window.onload = function() {
				new Vue({
					el: '#box',
					data: {
						msg: "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1508933902&di=e89e60282c5405c536053d45472ffb9b&src=http://img.newyx.net/news_img/201206/15/1339739368_21305215.jpg",
						imageUrl:"img/1.jpg",
						html:"<h1>谁在悬崖沏一壶茶</h1>"
					}
				})
			}
		</script>
	</head>

	<body>
		<div id="box">
			<img :src="msg" >
			<img :src="imageUrl" ><br />
			<span v-text="html"></span><br />
			<span v-html="html"></span>
		</div>
	</body>

</html>