用範例理解Vue.js #6:Computed vs Methods - iT 邦幫忙 | vue created method
接下來的幾天會分別介紹四個屬性,並互相比較倆倆之間差異和使用時機。computedmethodsfilterswatchComputed如果在模版內加入太多的邏輯運算,不但顯得雜亂也難以維護。例如:在顯示預設的字串「HelloVue!」之下,再顯示反轉後的字串。模版範例附上fiddle(https://jsfiddle.net/hunterliu/4jbwwur7/1/[1]) 原始訊息:{{message}} 反轉訊息:{{message.split().reverse().join()}}
接下來的幾天會分別介紹四個屬性,並互相比較倆倆之間差異和使用時機。
computed methods filters watch Computed如果在模版內加入太多的邏輯運算,不但顯得雜亂也難以維護。
例如:在顯示預設的字串「Hello Vue!」之下,再顯示反轉後的字串。
模版範例附上 fiddle (https://jsfiddle.net/hunterliu/4jbwwur7/1/[1])
<div id="app"> <p>原始訊息:{{ message }}</p> <p>反轉訊息:{{ message.split().reverse().join() }}</p> </div> var vm = new Vue({ el: #app, data: { message: Hello Vue! } }); Computed 基礎範例若改用 computed 則較容易閱讀,也把運算邏輯從 HTML 拆出來了。
附上 fiddle (https://jsfiddle.net/hunterliu/y7ztd5dg/[2])
<div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p> </div> var vm = new Vue({ el: #example, data: { message: Hello }, computed: { reversedMessage: function () { return this.message.split().reverse().join() } } }) 比較 Computed 和 ...