vue中的計(jì)算屬性和偵聽(tīng)屬性
計(jì)算屬性
計(jì)算屬性用于處理復(fù)雜的業(yè)務(wù)邏輯
計(jì)算屬性具有依賴性，計(jì)算屬性依賴 data中的初始值，只有當(dāng)初始值改變的時(shí)候，計(jì)算屬性才會(huì)再次計(jì)算
計(jì)算屬性一般書(shū)寫(xiě)為一個(gè)函數(shù)，返回了一個(gè)值，這個(gè)值具有依賴性，只有依賴的那個(gè)值發(fā)生改變，他才會(huì)重新計(jì)算
<!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 }} //直接使用計(jì)算屬性中的函數(shù)就是所要的數(shù)據(jù) </div></body><script src='http://www.4tl426be.cn/bcjs/vue.js'></script> //vue的js，不然使用不了vue語(yǔ)法<script> const app = new Vue({ el: ’#app’, data: { msg: ’hello world’ }, computed: { reverseMsg () { // 計(jì)算屬性是一個(gè)函數(shù)，返回一個(gè)值，使用和data中的選項(xiàng)一樣 console.log(’computed’) // 執(zhí)行1次 --- 依賴性 return this.msg.split(’’).reverse().join(’’); } } })</script></html>
偵聽(tīng)屬性(監(jiān)聽(tīng)屬性)
vue提供了檢測(cè)數(shù)據(jù)變化的一個(gè)屬性 watch 可以通過(guò) 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='http://www.4tl426be.cn/bcjs/vue.js'></script><script> const app = new Vue({ el: ’#app’, data: { firstname: ’李’, lastname: ’小龍’, fullname: ’李小龍’ }, watch: { // 偵聽(tīng)屬性 firstname (newVal, oldVal) { // newVal變化之后的值 this.fullname = newVal + this.lastname // 當(dāng)改變 姓 的時(shí)候執(zhí)行 }, lastname (newVal, oldVal) { this.fullname = this.firstname + newVal // 當(dāng)改變 名字 的時(shí)候執(zhí)行 } } })</script></html>
以上就是vue中的計(jì)算屬性和偵聽(tīng)屬性的詳細(xì)內(nèi)容，更多關(guān)于vue 計(jì)算屬性和偵聽(tīng)屬性的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！
相關(guān)文章：
1. Python網(wǎng)絡(luò)編程之ZeroMQ知識(shí)總結(jié)2. chat.asp聊天程序的編寫(xiě)方法3. Python查找算法之分塊查找算法的實(shí)現(xiàn)4. .NET 中配置從xml轉(zhuǎn)向json方法示例詳解5. python實(shí)現(xiàn)讀取類別頻數(shù)數(shù)據(jù)畫(huà)水平條形圖案例6. python之cur.fetchall與cur.fetchone提取數(shù)據(jù)并統(tǒng)計(jì)處理操作7. Python TestSuite生成測(cè)試報(bào)告過(guò)程解析8. 解決AJAX返回狀態(tài)200沒(méi)有調(diào)用success的問(wèn)題9. JSP之表單提交get和post的區(qū)別詳解及實(shí)例10. 低版本IE正常運(yùn)行HTML5+CSS3網(wǎng)站的3種解決方案
網(wǎng)公網(wǎng)安備