Vue学习笔记3.3 基础模板语法--{{content}}、v-text、v-html

最新推荐文章于 2024-08-27 21:31:35 发布

@凌晨三点半

最新推荐文章于 2024-08-27 21:31:35 发布

阅读量1.3k

点赞数

分类专栏： Vue.js 文章标签： Vue模板语法

本文链接：https://blog.csdn.net/soulwyb/article/details/85769779

版权

Vue.js 专栏收录该内容

64 篇文章 5 订阅

订阅专栏

1. 插值表达式

<!DOCTYPE html>
<html>
<head>
	<title>模板语法</title>
	<script src="vue.js"></script>
</head>
<body>
	<div id="app">
		{{name}}
	</div>
</body>
<script>
	var vm = new Vue({
		el:"#app",
		data: {
			name: "Dell"
		}
	})
</script>
</html>

2.v-text:

<!DOCTYPE html>
<html>
<head>
	<title>模板语法</title>
	<script src="vue.js"></script>
</head>
<body>
	<div id="app">
		<div v-text="name"></div>
	</div>
</body>
<script>
	var vm = new Vue({
		el:"#app",
		data: {
			name: "Dell"
		}
	})
</script>
</html>

3.v-html:

<!DOCTYPE html>
<html>
<head>
	<title>模板语法</title>
	<script src="vue.js"></script>
</head>
<body>
	<div id="app">
		<div v-html="name"></div>
	</div>
</body>
<script>
	var vm = new Vue({
		el:"#app",
		data: {
			name: "Dell"
		}
	})
</script>
</html>

v-html与v-text的区别在于 v-html会渲染HTML代码，而v-text不会举例：

<!DOCTYPE html>
<html>
<head>
	<title>模板语法</title>
	<script src="vue.js"></script>
</head>
<body>
	<div id="app">
		<div v-text="name"></div>
		<div v-html="name"></div>
	</div>
</body>
<script>
	var vm = new Vue({
		el:"#app",
		data: {
			name: "<h1>Dell</h1>"
		}
	})
</script>
</html>

v-text相当于插值表达式的内容。一般情况下 v-text="name" == {{name}}

这3种基本的模板语法中的内容不是字符串而是js表达式举例：

<!DOCTYPE html>
<html>
<head>
	<title>模板语法</title>
	<script src="vue.js"></script>
</head>
<body>
	<div id="app">
		{{name + ' Lee'}}
		<div v-text="name + ' Lee'"></div>
		<div v-html="name + ' Lee'"></div>
	</div>
</body>
<script>
	var vm = new Vue({
		el:"#app",
		data: {
			name: "Dell"
		}
	})
</script>
</html>