Vue.js Basic Learning 05 — Computed Properties

實際應用時通常不會是單純把 {{ info }} 顯示出來就好了,如果需求這麼單純那大可直接用 html 搞定,也不用從後端( call API 或是 PHP 塞入)餵資料進去。既然有顯示上的邏輯,就代表可能會有判斷,舉個簡單的例子:

假如使用者輸入的經驗值小於等於 100 那就是新手,否則為老手。依上述需求我們需要兩個變數:points 和 skill。skill 根據 points 來決定呈現的文字,而 points 和 input 做綁定。

直覺的寫法會是在顯示 skill 時用 inline 的方式做判斷,這個需求很簡單,這麼做也沒什麼問題:

<div id="app">
<h1>Skill: {{ points <= 100 ? 'Beginner' : 'Advanced' }}</h1>
<input type="text" v-model="points">
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
skill: 'Beginner',
points: 100
}
});
</script>

但要是判斷的邏輯較為複雜那還是需要獨立區塊來寫。使用 computed 來直接描述 skill:

<div id="app">
<h1>Skill: {{ skill }}</h1>
<input type="text" v-model="points">
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
skill: 'Beginner',
points: 100
},
computed: {
skill: function () {
if (this.points <= 100 )
{
return 'Beginner';
}
            return 'Advanced';
}
}
});
</script>

與先前的例子一樣,只要 input 中的數值更改,綁定的 points 變數也會更改,而 skill 變數也會連帶跟著改變。


再舉一個根據 firstname 和 lastname 來組合 fullname 的簡單例子:

<div id="app">
<h1>fullname: {{ fullname }}</h1>
<input type="text" v-model="firstname" placeholder="firstname">
<input type="text" v-model="lastname" placeholder="lastname">
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
firstname: 'Peter',
lastname: 'Parker'
},
computed: {
fullname: function () {
return this.firstname + ' ' + this.lastname;
}
}
});
</script>

由上述兩個例子可以知道的是,並非只有 data 裡面的區塊可以拿來做顯示的綁定。在 computed 中的屬性一樣可以拿來套用在 {{}} 之中。