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"
    }
})

---