vue - 插值符号

Vue.js

本章内容：

• 插值符号
• 声明式渲染
• 声明表达式
• 插值符号内使用字符串方法或数组方法
  

插值符号

​ Vue 是允许使用插值符号{{ }}，来声明表达式或者将数据渲染进 DOM 节点中。

声明式渲染

<div id="app">
    {{message}}
div>

new Vue({
    el: "#app",
    data: {
    	message: "第一个Vue案例"
    }
})

声明表达式

<div id="app">
    
    {{age >= 18 ? '已成年' : '未成年'}}
    <br/>
    
    {{grade >= 90 ? '优+' : grade >= 80 ? '优' : grade >= 60 ? '良' : '差'}}
div>

new Vue({
    el: "#app",
    data: {
        age: 18,
        grade: 88
    }
})

插值符号内使用字符串方法或数组方法

• 不建议在插值符号中使用方法，后续会要求使用计算属性。

<div id="app">
    {{str.substr(0, 1).toUpperCase() + str.substr(1)}}
div>

new Vue({
    el: "#app",
    data: {
        str: "vuejs"
    }
})

---