本篇文章主要介紹了vue計算屬性的使用和vue實例的方法範例,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟著小編過來看看吧
本文介紹了vue計算屬性的使用和vue實例的方法範例,分享給大家,具體如下:
##計算屬性
在模板中表達式非常便利,但是它們實際上只用於簡單的操作。模板是為了描述視圖的結構。在模板中放入太多的邏輯會讓模板過重且難以維護。這就是為什麼 Vue.js 將綁定表達式限制為一個表達式。如果需要多於一個表達式的邏輯,應使用計算屬性。vue 計算屬性
當我們想要根據一端業務程式碼的執行結果來傳回屬性的值,就可以使用計算屬性computed了,計算屬性是一個有結果的函數,有get方法和set方法,get方法,必須有回傳值必須有回傳值<script src="lib/vue.js"></script> <body> <p id="box"> a = >{{a}} b = > {{b}} </p> </body> <script> var vm = new Vue({ el:'#box', data:{ a:1 }, computed:{ b:function () { //业务代码 return this.a+1; } } }); /**这样直接改属性的值不行的,需要调用计算属性的set方法**/ document.onclick = function(){ vm.b = 3; }; </script>計算屬性的set/get方法:
<script src="lib/vue.js"></script> <body> <p id="box"> a = >{{a}} b = > {{b}} </p> </body> <script> var vm = new Vue({ el:'#box', data:{ a:1 }, computed:{ b:{ get:function () { return this.a+1; }, set:function(val){ this.a = val; } } } }); /**这样直接改属性的值不行的,需要调用计算属性的set方法**/ document.onclick = function(){ vm.b = 3; //默认调用计算属性的set方法 }; </script>
vue實例的簡單方法
vm 是建立的vue實例物件的名稱vm.$el -> 就是元素vm. $data -> 就是datavm.$mount -> 將vue物件掛載在節點物件上舉例:var vm2 = new Vue({ data:{}, methods:{} }).$mount('#box');等同於:
var vm2 = new Vue({ el:'#box', data:{}, methods:{} });vm.$options -> 取得自訂屬性,自訂方法vue實例可以自訂屬性與方法,如果需要呼叫就需要$options呼叫,舉例如下:
var vm2 = new Vue({ aa:'1',//自定义属性 show:function () { alert(1); }, el:'#box', data:{}, methods:{} }); vm2.$options.show(); console.log(vm2.$options.aa);vm.$destroy -> 銷毀物件vm.$log(); -> 查看現在資料的狀態上是我整理給大家的,希望今後會對大家有幫助。 相關文章:
以上是在vue中有關計算屬性如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!