vue中的計算屬性的使用和vue實例的方法示例
本文介紹了vue計算屬性的使用和vue實例的方法示例，分享給大家，具體如下：
計算屬性
在模板中表達式非常便利，但是它們實際上只用于簡單的操作。模板是為了描述視圖的結(jié)構(gòu)。在模板中放入太多的邏輯會讓模板過重且難以維護。這就是為什么 Vue.js 將綁定表達式限制為一個表達式。如果需要多于一個表達式的邏輯，應(yīng)當(dāng)使用計算屬性。
vue 計算屬性
當(dāng)我們想要根據(jù)一端業(yè)務(wù)代碼的執(zhí)行結(jié)果來返回屬性的值，就可以使用計算屬性computed了,
計算屬性是一個有結(jié)果的函數(shù),有g(shù)et方法和set方法，get方法，必須有返回值必須有返回值
<script src="lib/vue.js"></script>
<body>
<div id="box">
a = >{{a}}
b = > {}
</div>
</body>
<script>
var vm = new Vue({
el:'#box',
data:{
a:1
},
computed:{
b:function () {
//業(yè)務(wù)代碼
return this.a+1;
}
}
});
/**這樣直接改屬性的值不行的，需要調(diào)用計算屬性的set方法**/
document.onclick = function(){
vm.b = 3;
};
</script>
計算屬性的set/get方法:
<script src="lib/vue.js"></script>
<body>
<div id="box">
a = >{{a}}
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;
}
}
}
});
/**這樣直接改屬性的值不行的，需要調(diào)用計算屬性的set方法**/
document.onclick = function(){
vm.b = 3;
//默認(rèn)調(diào)用計算屬性的set方法
};
</script>
vue實例的簡單方法
vm 是創(chuàng)建的vue實例對象的名字
vm.$el -> 就是元素
vm.$data -> 就是data
vm.$mount -> 將vue對象掛載在節(jié)點對象上
舉個例子:
var vm2 = new Vue({
data:{},
methods:{}
}).$mount('#box');
等同于:
var vm2 = new Vue({
el:'#box',
data:{},
methods:{}
});
vm.$options -> 獲取自定義屬性,自定義方法
vue實例可以自定義屬性和方法，如果需要調(diào)用就需要$options調(diào)用,舉例如下:
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(); -> 查看現(xiàn)在數(shù)據(jù)的狀態(tài)
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue組件通信方式(父傳子、子傳父、兄弟通信)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
vue列表數(shù)據(jù)刪除后主動刷新頁面及刷新方法詳解
這篇文章主要給大家介紹了關(guān)于vue列表數(shù)據(jù)刪除后主動刷新頁面及刷新方法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
本文主要介紹了Vue出現(xiàn)彈出層時禁止底部頁面跟隨滑動，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
Vue中使用Element UI的Table組件實現(xiàn)嵌套表格功能
這篇文章主要介紹了Vue中使用Element UI的Table組件實現(xiàn)嵌套表格功能,演示如何在Vue中使用Element UI的Table組件實現(xiàn)嵌套表格,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01
vue 路由緩存 路由嵌套 路由守衛(wèi) 監(jiān)聽物理返回操作
這篇文章主要介紹了vue 路由緩存 路由嵌套 路由守衛(wèi) 監(jiān)聽物理返回操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vscode搭建vue環(huán)境完整圖文教程(適合新手小白)
Vue框架的優(yōu)秀設(shè)計和強大的生態(tài)系統(tǒng)成為了越來越多開發(fā)者選擇Vue的原因,在實際項目過程中一個高效的開發(fā)環(huán)境能夠大大提高開發(fā)效率,這篇文章主要給大家介紹了關(guān)于vscode搭建vue環(huán)境的相關(guān)資料,需要的朋友可以參考下2023-10-10
vue?中使用?this?更新數(shù)據(jù)的一次問題記錄
這篇文章主要介紹了vue?中使用?this?更新數(shù)據(jù)的一次大坑?,我在 vue 實例中聲明了一個數(shù)組屬性如?books: []，在異步請求的回調(diào)函數(shù)中使用?this.books = res.data.data;?進行數(shù)據(jù)更新，感興趣的朋友跟隨小編一起看看吧2022-11-11
echarts.js 動態(tài)生成多個圖表 使用vue封裝組件操作
這篇文章主要介紹了echarts.js 動態(tài)生成多個圖表 使用vue封裝組件操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
defineProps是Vue3中的一種新的組件數(shù)據(jù)傳遞方式,可以用于在子組件中定義接收哪些父組件的props,這篇文章給大家介紹vue3中defineProps及使用方法詳解,感興趣的朋友跟隨小編一起看看吧2024-03-03
這篇文章主要介紹了vue的url請求圖片的問題及請求失敗解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-09-09