Vue?計算屬性之姓名案例的三種實現(xiàn)方法
效果:
一、姓名案例-插值語法實現(xiàn)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue初識</title> <script type="text/javascript" src="./js/vue.js"></script> <style> </style> </head> <body> <div id="root"> 姓:<input type="text" v-model="firstName"><br/><br/> 名:<input type="text" v-model="lastName"><br/><br/> 全名:<span>{{firstName}}-{{lastName}}</span> </div> <script type="text/javascript"> Vue.config.productionTip = false new Vue({ el:'#root', data:{ firstName:'張', lastName:'三' } }) </script> </body> </html>
二、姓名案例-methods實現(xiàn)
數(shù)據(jù)一發(fā)生變化,模板需要重新解析
<div id="root"> 姓:<input type="text" v-model="firstName"><br/><br/> 名:<input type="text" v-model="lastName"><br/><br/> 全名:<span>{{fullName()}}</span> </div> <script type="text/javascript"> Vue.config.productionTip = false new Vue({ el: '#root', data: { firstName: '張', lastName: '三' }, methods: { fullName() { //每次姓或名發(fā)生改變,方法都會被調(diào)用 return this.firstName + "-" + this.lastName } } }) </script>
三、姓名案例-計算屬性實現(xiàn)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue初識</title> <script type="text/javascript" src="./js/vue.js"></script> <style> </style> </head> <body> <div id="root"> 姓:<input type="text" v-model="firstName"> 名:<input type="text" v-model="lastName"> 全名:<span>{{fullName}}</span> </div> <script type="text/javascript"> Vue.config.productionTip = false const vm = new Vue({ el: '#root', data: { firstName: '張', lastName: '三' }, computed: { fullName: { //get()作用:當有人讀取fullName時,get就會被調(diào)用,返回值就作為fullName的值 //get()調(diào)用時機:1、初次讀取fullName時。2、所依賴的數(shù)據(jù)發(fā)生變化時 get() { return this.firstName + "-" + this.lastName }, //set()調(diào)用時機:當fullName被修改時 set(value) { const arr = value.split('-') this.firstName = arr[0] this.lastName = arr[1] } } } }) </script> </body> </html>
計算屬性 1、定義:要用的屬性不存在,要通過已有屬性計算得來 2、原理:底層借助了objcet.defineproperty
方法提供的 getter 和 setter
get 函數(shù)什么時候執(zhí)行? 1、初次讀取時會執(zhí)行一次,再讀取計算屬性不會執(zhí)行,因為有緩存 2、當依賴的數(shù)據(jù)發(fā)生改變時會被再次調(diào)用
優(yōu)勢 與 methods 實現(xiàn)相比,內(nèi)部有緩存機制(復用),效率更高,調(diào)試方便。
備注 1、計算屬性最終會出現(xiàn)在vm上,直接讀取使用即可 2、如果計算屬性要被修改,那必須寫 set 函數(shù)去響應修改,且 set 中要引起計算時依賴的數(shù)據(jù)發(fā)生變化
四、計算屬性簡寫
當只考慮讀取,不考慮修改時,可以使用簡寫形式
<div id="root"> 姓:<input type="text" v-model="firstName"><br/><br/> 名:<input type="text" v-model="lastName"><br/><br/> 全名:<span>{{fullName}}</span> </div> <script type="text/javascript"> Vue.config.productionTip = false const vm = new Vue({ el: '#root', data: { firstName: '張', lastName: '三' }, computed: { fullName(){ return this.firstName + "-" + this.lastName } } }) </script>
到此這篇關于Vue 計算屬性之姓名案例的三種實現(xiàn)方法的文章就介紹到這了,更多相關Vue 計算屬性 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!