計算屬性
在模板中表達式非常便利，但是它們實際上只用於簡單的操作。模板是為了描述視圖的結構。在模板中放入太多的邏輯會讓模板過重且難以維護。這就是為什麼 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中文網其他相關文章！
