vue計算屬性computed的使用方法示例
更新時間：2019年03月13日 09:29:46 作者：白楊-M
這篇文章主要介紹了vue計算屬性computed的使用方法,結(jié)合實例形式分析了vue計算屬性computed的基本用法及相關(guān)操作注意事項,需要的朋友可以參考下
本文實例講述了vue計算屬性computed的使用方法。分享給大家供大家參考，具體如下：
computed:{
b:function(){ //默認(rèn)調(diào)用get
return 值
}
}
computed:{
b:{
get:
set:
}
}
* computed里面可以放置一些業(yè)務(wù)邏輯代碼，一定記得return
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>m.fzitv.net 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è)務(wù)邏輯代碼,b的值完全取決于return回來的值
get:function(){
return this.a+2;//默認(rèn)調(diào)用get
},
set:function(val){
this.a=val;
}
}
}
});
document.onclick=function(){
vm.b=10;//相當(dāng)于set函數(shù)傳入val=10
};
</script>
</body>
</html>
運行結(jié)果：
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
希望本文所述對大家vue.js程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要為大家詳細介紹了Vue+Openlayers自定義軌跡動畫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
解決Vue-cli3沒有vue.config.js文件夾及配置vue項目域名的問題
這篇文章主要介紹了解決Vue-cli3沒有vue.config.js文件夾及配置vue項目域名的問題，本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-12-12
使用Vue3和Axios進行API數(shù)據(jù)交互的代碼實現(xiàn)
在現(xiàn)代Web開發(fā)中,前端框架和庫的使用越來越普遍,Vue.js便是其中一個受歡迎的選擇,Axios作為一個基于Promise的HTTP客戶端,能夠幫助我們輕松地與API進行交互,在這篇博客中,我將介紹如何利用Vue 3及Axios進行API數(shù)據(jù)交互,需要的朋友可以參考下2024-09-09
Vue 2.5.2下axios + express 本地請求404的解決方法
下面小編就為大家分享一篇Vue 2.5.2下axios + express 本地請求404的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了Vue中的前端crypto.js加解密問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要為大家詳細介紹了vue3如何通過elementPlus實現(xiàn)一個簡單的年份選擇器,文中的示例代碼講解詳細,需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
圖片壓縮是一種比較便捷的壓縮方式,本文主要介紹了vue3中實現(xiàn)圖片壓縮的示例代碼,文中通過示例代碼介紹的非常詳細,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-02-02
開發(fā)中遇到bug是在正常不過了,而程序也基本都是bug堆里爬出來的,對于程序員來說bug調(diào)試也是自己工作的重要組成部分,下面這篇文章主要給大家介紹了關(guān)于Vue環(huán)境搭建報錯整理的相關(guān)資料,需要的朋友可以參考下2022-08-08
這篇文章主要為大家詳細介紹了Vue 3.0雙向綁定原理的實現(xiàn)方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
Vue提供了一種稱為函數(shù)式組件的組件類型,用來定義那些沒有響應(yīng)數(shù)據(jù),也不需要有任何生命周期的場景,它只接受一些props來顯示組件,下面這篇文章主要給大家介紹了關(guān)于Vue高級組件之函數(shù)式組件的使用場景與源碼分析的相關(guān)資料,需要的朋友可以參考下2023-01-01