首頁 > 開發者 > JavaScript
vue中的計算屬性的使用和vue執行個體的方法樣本，vue執行個體
本文介紹了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(); -> 查看現在資料的狀態
以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
