計算屬性
在模板中表達式非常便利,但是它們實際上只用於簡單的操作。模板是為了描述視圖的結構。在模板中放入太多的邏輯會讓模板過重且難以維護。這就是為什麼 Vue.js 將綁定表達式限制為一個表達式。如果需要多於一個表達式的邏輯,應使用計算屬性。本文主要介紹vue計算屬性的使用和vue實例的方法範例,小編覺得挺不錯的,現在分享給大家,也給大家做個參考,希望能幫助到大家。
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實例的簡單方法
var vm2 = new Vue({ data:{}, methods:{} }).$mount('#box');
var vm2 = new Vue({ el:'#box', data:{}, methods:{} });
var vm2 = new Vue({ aa:'1',//自定义属性 show:function () { alert(1); }, el:'#box', data:{}, methods:{} }); vm2.$options.show(); console.log(vm2.$options.aa);
#關於Vue.js表單標籤中的單選按鈕、複選按鈕和下拉清單的取值詳解
##Vue.js元件通訊中的幾種姿勢具體分析以上是vue中的計算屬性的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!