表现形式
以双花括号{{}}进行显示,例如:
<div id = "app">
<p>{{ msg }}</p>
<a href="#">{{ href }}</a>
</div>
作用
通过插值表达式,我们可以更好的将数据渲染到页面上。同时要注意表达式这个概念,表达式是一段可以被求值的代码,JS引擎会自动计算其结果,例如下面这些形式也同样可以:
<div id = "app">
<!-- 直接展示msg数据 -->
<p>{{ msg }}</p>
<!-- 展示people对象中的name属性 -->
<p>{{ people.name }}</p>
<!-- 通过三元表达式进行不同结果展示 -->
<p>{{ age >= 18 ? "成年" : "未成年" }}</p>
<!-- 运行people对象的Printsex方法,展示的是方法返回值 -->
<p>{{ people.Printsex()}}</p>
</div>
注意点
(1) 数据必须存在
(2) 支持的是表达式,而非语句,例如if、for..
(3) 不能在标签属性中使用, 例如<p title="{{msg}}"> hello</p>
完整版html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>插值表达式的概念</title>
</head>
<body>
<div id = "app">
<!-- 直接展示msg数据 -->
<p>{{ msg }}</p>
<!-- 展示people对象中的name属性 -->
<p>{{ people.name }}</p>
<!-- 通过三元表达式进行不同结果展示 -->
<p>{{ age >= 18 ? "成年" : "未成年" }}</p>
<!-- 运行people对象的Printsex方法,展示的是方法返回值 -->
<p>{{ people.Printsex()}}</p>
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue(
{
// 通过el配置选择器,指定Vue管理的是那个盒子
el: "#app",
data:{
msg : "Hello, World",
age: 18,
people: {
name : "张三",
sex : "女",
Printsex : function(){
return this.sex === "男" ? this.name + "先生" : this.name + "女士"
}
}
}
}
)
</script>
</body>
</html>
