演示Vue3插值表达式

酒城译痴无心剑

已于 2023-06-09 09:02:15 修改

阅读量491

点赞数

分类专栏： Vue学习笔记文章标签： vue.js 前端 javascript

于 2023-06-08 18:23:22 首次发布

本文链接：https://blog.csdn.net/howard2005/article/details/131113393

版权

Vue学习笔记专栏收录该内容

23 篇文章

订阅专栏

文章目录

一、插值表达式概念
二、演示插值表达式

一、插值表达式概念

在使用Vue后，无须再操作DOM元素，直接以插值表达式的形式输出属性值。{{}}又被叫作插值表达式，可直接渲染data中的属性。
创建demo01.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>demo01 - 插值表达式</title>
	</head>
	<body>		
		<div id="app">			
			<h1 style="color: red;text-align: center;">{{ message }}</h1>
		</div>	
		
		<!--安装Vue.js-->
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
		<script>
			const { createApp } = Vue
		  
			createApp({
				data() {
					return {						
						message: '欢迎访问Vue世界~',
				   }
				}
			}).mount('#app')
		</script>
	</body>
</html>

访问页面，查看效果
通过以上实例可以发现，我们只需要注意data中的数据，不需要考虑数据具体是怎么渲染到页面中的，因为Vue已经帮我们实现了，这也是Vue的核心思想之一，即数据驱动视图。

二、演示插值表达式

插值表达式不仅可以渲染字符串，还可以渲染对象、函数、运算符
创建demo02.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>demo02 - 演示插值表达式</title>
	</head>
	<body>		
		<div id="app">
			<!--渲染字符串-->
			{{ message }}<br />
			<!--渲染对象-->
			{{student}}<br />
			<!--渲染函数-->
			100 + 150 = {{sum(100, 150)}}<br />
			<!--渲染运算符-->
			{{age >= 18 ? '你年满18周岁~' : '你尚未成年呢~'}}
		</div>		
		
		<!--安装Vue.js-->
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
		<script>
			import { createApp } from 'vue'
		  
			createApp({
				data() {
					return {
						// 字符串
						message: '欢迎访问泸州职业技术学院',
						// 对象
						student: {
							id: '20210101',
							name: '陈燕文',
							gender: '女',
							age: 18
						},
						// 函数
						sum: function(a, b) {
							return a + b
						},
						// 数字
						age: 25
					}
				}
			}).mount('#app')
		</script>
	</body>
</html>