版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
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、插值使用注意事项
注意:插值只能获取元素的文本内容
,元素的属性不能使用插值获取