04_Vue模板语法-插值

最新推荐文章于 2023-11-30 16:39:59 发布

嫣夜来

最新推荐文章于 2023-11-30 16:39:59 发布

阅读量324

点赞数

分类专栏： Vue前端框架

本文链接：https://blog.csdn.net/qq_41865652/article/details/100976928

版权

Vue前端框架专栏收录该内容

21 篇文章 0 订阅

订阅专栏

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/vue@2.6.10/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、插值使用注意事项

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

嫣夜来

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
04_Vue模板语法-插值

1、什么是插值（插值表达式）在 html元素中使用{{}}获取实例对象对象中 data 的属性值,这种使用 {{}} 获取值得方式，叫做插值或插值表达式。2、插值使用实例演示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>...
复制链接

扫一扫

专栏目录