溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文介紹了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(); -> 查看現在數據的狀態
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
