详解插值表达式
在 1.3 节中，我们使用插值表达式渲染了 data 中的 msg 数据，代码如下。
<div id="app">
<h1>{{ msg }}</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'Hello World'
}
});
</script>上述代码中的 msg 的值是字符串，本节要讲的是，插值表达式不仅可以渲染字符串，还可以渲染对象、函数、运算符，代码如下。
<div id="app">
<!-- 渲染字符串 -->
{{ msg }}
<!-- 渲染对象 -->
{{ obj.name }}
<!-- 渲染函数 -->
{{ f1() }}
<!-- 渲染运算符 -->
{{ num > 10 ? '大于10' : '小于10' }}
</div>
<!-- 安装 Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
// 字符串
msg: 'Hello World',
// 对象
obj: {
name: '张三'
},
// 函数
f1: function () {
return 1 + 1;
},
num: 15
}
});
</script>运行结果如图 1-2 所示。
Figure 1. 图1-2 插值表达式的渲染结果
|
插值表达式不支持变量赋值、逻辑运算等，如下所示，代码的运行结果是错误的。 |