Vue.js学习笔记—插值的操作(1)

最新推荐文章于 2023-05-13 19:57:55 发布

风落_

最新推荐文章于 2023-05-13 19:57:55 发布

阅读量196

点赞数 1

分类专栏： Vue学习文章标签： vue

本文链接：https://blog.csdn.net/qq_45523411/article/details/117003265

版权

Vue学习专栏收录该内容

3 篇文章

订阅专栏

mustache语法
Mustache 是一款经典的前端模板引擎，在前后端分离的技术架构下面，前端模板引擎是一种可以被考虑的技术选型，随着重型框架（AngularJS、ReactJS、Vue）的流行，前端的模板技术已经成为了某种形式上的标配，Mustache 的价值在于其稳定和经典 https://www.jianshu.com/p/7f1cecdc27e1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	
	<body>
		<div id='app'>
			<h2>{{message}}</h2>
			<!-- 插入到标签中 -->
			<h2>{{message}}, 阿 巴</h2>
			<!--mustache语法中，不仅可以直接写变量，也可以写简单的表达式-->
			<h2>{{firstname + lastname}}</h2>
			<h2>{{firstname + " " + lastname}}</h2>
			<!-- 使用了两个mustache -->
			<h2>{{firstname}} {{lastname}}</h2>
			<!-- 也可以是一个表达式 -->
			<h2>{{counter * 2}}</h2>
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: '#app',
				data: {
					message: '你好吖',
					firstname: '阿',
					lastname: '巴',
					counter: 233
				}
			})
		</script>
	</body>
</html>

在这里插入图片描述

v-once指令的使用(较少使用)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	
	<body>
		<div id="app">
			<h2>{{message}}</h2>
			<!-- v-once表示元素和组件只渲染一次，不会随着数据的改变而改变 -->
			<h2 v-once>{{message}}</h2>
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: '#app',
				data: {
					message: '你好啊'
				}
			})
		</script>
	</body>
</html>

在检查中修改代码，发现带有v-once的标签并没有改变
在这里插入图片描述

v-html指令的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	
	<body>
		<div id="app">
			<h2>{{url}}</h2>
			<!--v-html解析从服务器请求到的html代码-->
			<h2 v-html="url"></h2>
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: '#app',
				data: {
					message: '你好啊',
					url: '<a href="http://www.baidu.com">百度一下</a>'
				}
			})
		</script>
	</body>
</html>