vue計(jì)算屬性get和set用法示例
本文實(shí)例講述了vue計(jì)算屬性get和set用法。分享給大家供大家參考，具體如下：
計(jì)算屬性是什么：vue文檔里是這么說的，模板中綁定太多的邏輯會讓模板過重且難以維護(hù)。
換句話說，就是可以自己設(shè)置值（b值），這個(gè)值和data下定義的值（a值）存在某些關(guān)系，b的值是基于a的值，通過某些邏輯產(chǎn)生出來的值，b值可以直接拿到template里去用。當(dāng)a的值發(fā)生變化的時(shí)候，b的值會跟著變化。就是計(jì)算屬性中的默認(rèn)值get。那set又是什么鬼？
b的值是基于a的變化而變化的，那么直接修改b的值的時(shí)候，會怎么樣？這里會走進(jìn)set方法里去。
總之一條：b的值始終是依賴a的值存在和變化的。最后渲染出來的a為100，b為110
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue計(jì)算屬性get和set</title>
<style>
</style>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>a的值是：{{a}}</p>
<p>b的值是：{}</p>
<button @click="change">按鈕</button>
</div>
<script>
new Vue({
el: '#app',
data:{
a:1
},
computed: {
b: {
// getter
get: function () {
return this.a + 10
},
// setter
set: function (val) {
this.a = val
}
}
},
methods:{
change() {
this.b = 100
}
}
})
</script>
</body>
</html>
這里使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼，可得如下運(yùn)行結(jié)果：
希望本文所述對大家vue.js程序設(shè)計(jì)有所幫助。
相關(guān)文章
基于Vue實(shí)現(xiàn)tab欄切換內(nèi)容不斷實(shí)時(shí)刷新數(shù)據(jù)功能
在項(xiàng)目開發(fā)中遇到這樣需求，就是有幾個(gè)tab欄，每個(gè)tab欄對應(yīng)的ajax請求不一樣，內(nèi)容區(qū)域一樣，內(nèi)容為實(shí)時(shí)刷新數(shù)據(jù)，實(shí)現(xiàn)方法其實(shí)很簡單的，下面小編給大家?guī)砹嘶赩ue實(shí)現(xiàn)tab欄切換內(nèi)容不斷實(shí)時(shí)刷新數(shù)據(jù)功能，需要的朋友參考下吧2017-04-04
vue監(jiān)聽滾動事件實(shí)現(xiàn)滾動監(jiān)聽
本文主要介紹了vue監(jiān)聽滾動事件實(shí)現(xiàn)滾動監(jiān)聽的相關(guān)資料。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-04-04
這篇文章主要給大家介紹了關(guān)于前端vue播放m3u8、flv、mp4視頻的方法,隨著前端大屏頁面的逐漸壯大,客戶的需求也越來越多,大屏上面展示的事物也越來越豐富,需要的朋友可以參考下2023-07-07
基于vue+uniapp直播項(xiàng)目實(shí)現(xiàn)uni-app仿抖音/陌陌直播室功能
uni-liveShow是一個(gè)基于vue+uni-app技術(shù)開發(fā)的集小視頻/IM聊天/直播等功能于一體的微直播項(xiàng)目。本文通過實(shí)例圖文的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2019-11-11
解決echarts數(shù)據(jù)二次渲染不成功的問題
這篇文章主要介紹了解決echarts數(shù)據(jù)二次渲染不成功的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了關(guān)于vant折疊面板默認(rèn)展開問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vuex中的state、getters、mutations、actions之間的關(guān)系解讀
這篇文章主要介紹了vuex中的state、getters、mutations、actions之間的關(guān)系,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue el-table 默認(rèn)展開某一行的實(shí)例
這篇文章主要介紹了Vue el-table 默認(rèn)展開某一行的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue寫一個(gè)全局彈窗組件通過js調(diào)用的方法
彈窗效果是在Web開發(fā)中經(jīng)常用到的一種交互效果,它可以在用戶點(diǎn)擊某個(gè)按鈕或者觸發(fā)某個(gè)事件時(shí)顯示一個(gè)懸浮框,提供用戶與頁面進(jìn)行交互的機(jī)會,這篇文章主要給大家介紹了關(guān)于vue寫一個(gè)全局彈窗組件通過js調(diào)用的方法,需要的朋友可以參考下2024-06-06
這篇文章主要介紹了vue2.x對象單層劫持的原理實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01