vue中的計算屬性和偵聽屬性
更新時間：2020年11月06日 09:03:56 作者：LC蝸牛
這篇文章主要介紹了vue中的計算屬性和偵聽屬性，幫助大家更好的理解和學(xué)習(xí)vue框架的使用，感興趣的朋友可以了解下
計算屬性
計算屬性用于處理復(fù)雜的業(yè)務(wù)邏輯
計算屬性具有依賴性，計算屬性依賴 data中的初始值，只有當(dāng)初始值改變的時候，計算屬性才會再次計算
計算屬性一般書寫為一個函數(shù)，返回了一個值，這個值具有依賴性，只有依賴的那個值發(fā)生改變，他才會重新計算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表單輸入綁定</title>
</head>
<body>
<div id="app">
{{ reverseMsg }}---- {{ reverseMsg }}-------- {{ reverseMsg }} //直接使用計算屬性中的函數(shù)就是所要的數(shù)據(jù)
</div>
</body>
<script src="vue.js"></script> //vue的js，不然使用不了vue語法
<script>
const app = new Vue({
el: '#app',
data: {
msg: 'hello world'
},
computed: {
reverseMsg () { // 計算屬性是一個函數(shù)，返回一個值，使用和data中的選項一樣
console.log('computed') // 執(zhí)行1次 --- 依賴性
return this.msg.split('').reverse().join('');
}
}
})
</script>
</html>
偵聽屬性(監(jiān)聽屬性)
vue提供了檢測數(shù)據(jù)變化的一個屬性 watch 可以通過 newVal 獲取變化之后的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表單輸入綁定</title>
</head>
<body>
<div id="app">
<input type="text" v-model="firstname"> + <input type="text" v-model="lastname"> = {{ fullname }}
</div>
</body>
<script src="vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
firstname: '李',
lastname: '小龍',
fullname: '李小龍'
},
watch: { // 偵聽屬性
firstname (newVal, oldVal) { // newVal變化之后的值
this.fullname = newVal + this.lastname // 當(dāng)改變 姓 的時候執(zhí)行
},
lastname (newVal, oldVal) {
this.fullname = this.firstname + newVal // 當(dāng)改變 名字 的時候執(zhí)行
}
}
})
</script>
</html>
以上就是vue中的計算屬性和偵聽屬性的詳細(xì)內(nèi)容，更多關(guān)于vue 計算屬性和偵聽屬性的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Element-ui?DatePicker日期選擇器基礎(chǔ)用法示例
這篇文章主要為大家介紹了Element-ui?DatePicker日期選擇器基礎(chǔ)用法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
vue+element 實現(xiàn)商城主題開發(fā)的示例代碼
這篇文章主要介紹了vue+element 實現(xiàn)商城主題開發(fā)的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
vue3內(nèi)嵌iframe的傳參與接收參數(shù)代碼示例
這篇文章主要給大家介紹了關(guān)于vue3內(nèi)嵌iframe的傳參與接收參數(shù)的相關(guān)資料,Vue項目中使用iframe及傳值功能相信有不少人都遇到過,需要的朋友可以參考下2023-07-07
nginx是一個高性能的HTTP和反向代理服務(wù)器。這篇文章主要介紹了vue.js項目nginx部署,需要的朋友可以參考下2018-04-04
第一次在Vue中完整使用AJAX請求和axios.js的實戰(zhàn)記錄
AJAX是現(xiàn)代Web開發(fā)的一個關(guān)鍵部分,盡管它一開始看起來令人生畏,但在你的武庫中擁有它是必須的,下面這篇文章主要給大家介紹了關(guān)于第一次在Vue中完整使用AJAX請求和axios.js的相關(guān)資料,需要的朋友可以參考下2022-11-11
Ant Design Vue全局對話確認(rèn)框(confirm)的回調(diào)不觸發(fā)
這篇文章主要介紹了Ant Design Vue全局對話確認(rèn)框(confirm)的回調(diào)不觸發(fā)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
vue3使用vuex實現(xiàn)頁面實時更新數(shù)據(jù)實例教程(setup)
在前端開發(fā)中往往會遇到頁面需要實時刷新數(shù)據(jù)的情況,給用戶最新的數(shù)據(jù)展示,這篇文章主要給大家介紹了關(guān)于vue3使用vuex實現(xiàn)頁面實時更新數(shù)據(jù)(setup)的相關(guān)資料,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了Vue select 綁定動態(tài)變量的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vue使用混入定義全局變量、函數(shù)、篩選器的實例代碼
本文主要是給大家分享利用混入mixins來實現(xiàn)全局變量和函數(shù)。這種方法優(yōu)點是ide會有方法、變量、篩選器提示。對vue中 利用混入定義全局變量、函數(shù)、篩選器的相關(guān)知識感興趣的朋友，跟隨小編一起看看吧2019-07-07
vue ElementUI的from表單實現(xiàn)登錄效果的示例
本文主要介紹了vue ElementUI的from表單實現(xiàn)登錄效果的示例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09