vue計算屬性computed的使用方法示例
更新時間：2019年03月13日 09:29:46 作者：白楊-M
這篇文章主要介紹了vue計算屬性computed的使用方法,結合實例形式分析了vue計算屬性computed的基本用法及相關操作注意事項,需要的朋友可以參考下
本文實例講述了vue計算屬性computed的使用方法。分享給大家供大家參考，具體如下：
computed:{
b:function(){ //默認調(diào)用get
return 值
}
}
computed:{
b:{
get:
set:
}
}
* computed里面可以放置一些業(yè)務邏輯代碼，一定記得return
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>www.dbjr.com.cn vue計算屬性computed</title>
<style>
</style>
<script src="https://cdn.bootcss.com/vue/1.0.4/vue.min.js"></script>
</head>
<body>
<div id="box">
a => {{a}}
<br>
b => {}
</div>
<script>
var vm=new Vue({
el:'#box',
data:{
a:1
},
computed:{
b:{
//業(yè)務邏輯代碼,b的值完全取決于return回來的值
get:function(){
return this.a+2;//默認調(diào)用get
},
set:function(val){
this.a=val;
}
}
}
});
document.onclick=function(){
vm.b=10;//相當于set函數(shù)傳入val=10
};
</script>
</body>
</html>
運行結果：
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
希望本文所述對大家vue.js程序設計有所幫助。
相關文章
這篇文章主要介紹了Vue通過axios發(fā)送ajax請求基礎演示,包括了axios發(fā)送簡單get請求，axios get傳參，axios發(fā)送post請求等基礎代碼演示需要的朋友可以參考下2023-02-02
這篇文章主要介紹了vue中響應式布局如何將字體大小改成自適應，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要為大家詳細介紹了Vue實現(xiàn)點擊導航欄當前標簽后變色功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
vue3如何添加eslint校驗(eslint-plugin-vue)
這篇文章主要介紹了vue3如何添加eslint校驗(eslint-plugin-vue),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
這篇文章主要介紹了Vue 中可以定義組件模版的幾種方式以及他們之間的一些差別，需要的朋友可以參考下2019-08-08
這篇文章主要介紹了加快Vue項目的開發(fā)速度的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
Vue+axios+WebApi+NPOI導出Excel文件實例方法
在本篇文章里小編給大家整理關于Vue+axios+WebApi+NPOI導出Excel文件的知識點以及實例代碼，需要的朋友們參考下。2019-06-06
這篇文章主要介紹了vue中為何方法要寫在methods的里面，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要為大家詳細介紹了Vue.js?的過濾器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
這篇文章主要為大家詳細介紹了vue頁面使用多個定時器的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09