本文介紹了vue計算屬性的使用和vue實例的方法示例，分享給大家，具體如下：
計算屬性
在模板中表達式非常便利，但是它們實際上只用于簡單的操作。模板是為了描述視圖的結構。在模板中放入太多的邏輯會讓模板過重且難以維護。這就是為什么 Vue.js 將綁定表達式限制為一個表達式。如果需要多于一個表達式的邏輯，應當使用計算屬性。
vue 計算屬性
當我們想要根據一端業務代碼的執行結果來返回屬性的值，就可以使用計算屬性computed了,
計算屬性是一個有結果的函數,有get方法和set方法，get方法，必須有返回值必須有返回值
<script src="lib/vue.js"></script> <body> <div id="box"> a = >{{a}} b = > {{b}} </div> </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> <div id="box"> a = >{{a}} b = > {{b}} </div> </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 -> 就是data
vm.$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(); -> 查看現在數據的狀態
新聞熱點
疑難解答
圖片精選
