一、插值表达式 {{变量名}}
使用{{变量名}}方式绑定Vue实例中data中的数据变量,
会将绑定的数据实时的在视图中显示出来
二、支持的语法
常规变量
四则运算
逻辑运算
三目运算
方法调用
…
三、演示
{{msg}} 渲染为: 欢迎学习vue框架
{{msg+‘,你可以学会的’}} 渲染为: 欢迎学习vue框架,你可以学会的
{{num+10}} 渲染为: 95
{{num>100?‘大于100’:‘小于100’}} 渲染为: 小于100
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
<p>{{msg+',你可以学会的'}}</p>
<p>{{num+10}}</p>
<p>{{num>100?'大于100':'小于100'}}</p>
</div>
</body>
</html>
<script>
const vm = new Vue({
el: "#app",
data: {
msg: "欢迎学习vue框架",
num: 85,
},
});
</script>