vue中的計算屬性和偵聽屬性
阿新 • • 發佈：2020-11-07
計算屬性
計算屬性用於處理複雜的業務邏輯
計算屬性具有依賴性，計算屬性依賴 data中的初始值，只有當初始值改變的時候，計算屬性才會再次計算
計算屬性一般書寫為一個函式，返回了一個值，這個值具有依賴性，只有依賴的那個值發生改變，他才會重新計算
<!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 }} //直接使用計算屬性中的函式就是所要的資料
</div>
</body>
<script src="vue.js"></script> //vue的js，不然使用不了vue語法
<script>
const app = new Vue({
el: '#app',data: {
msg: 'hello world'
},computed: {
reverseMsg () { // 計算屬性是一個函式，返回一個值，使用和data中的選項一樣
console.log('computed') // 執行1次 --- 依賴性
return this.msg.split('').reverse().join('');
}
}
})
</script>
</html>偵聽屬性(監聽屬性)
vue提供了檢測資料變化的一個屬性 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 // 當改變 姓 的時候執行
},lastname (newVal,oldVal) {
this.fullname = this.firstname + newVal // 當改變 名字 的時候執行
}
}
})
</script>
</html>以上就是vue中的計算屬性和偵聽屬性的詳細內容，更多關於vue 計算屬性和偵聽屬性的資料請關注我們其它相關文章！