04_Vue模板语法-插值

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: https://blog.csdn.net/qq_41865652/article/details/100976928

1、什么是插值(插值表达式)

在 html元素中使用{{}}获取实例对象对象中 data 的属性值,这种使用 {{}} 获取值得方式,叫做 插值插值表达式

2、插值使用实例演示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>01_插值</title>
</head>
<body>
	<p id="para">{{ content }}</p>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
	// 插值
	// 在html元素中使用{{ key }}的方式引入新创建Vue对象中的data属性中的内容
	
	// 注意 
	// 1. {{ value }} 双括号中的value值必须是一个具体值
		// 	1.1 可以是一个数字、字符串、数组、对象
		// 	1.2  可以是一个有返回值的表达式
		// 	1.3  可以是一个有返回值的函数调用
		// 	1.4  可以是一个三元运算符
	var app = new Vue({
		el: '#para',
		data: {
			content: 'Hello World!'
		}
	});
	console.log(app);
</script>
</html>

结果如下图:
在这里插入图片描述

3、插值使用注意事项

注意:插值只能获取元素的文本内容,元素的属性不能使用插值获取

猜你喜欢

转载自blog.csdn.net/qq_41865652/article/details/100976928