16 vue之计算属性
1 计算属性computed
复杂逻辑,模板难以维护
(1) 基础例子
(2) 计算缓存 VS methods-计算属性是基于它们的依赖进行缓存的。-计算属性只有在它的相关依赖发生改变时才会重新求值
(3) 计算属性 VS watch
- v-model3
2 通过计算属性实现名字首字母大写
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="box"> <input type="text" v-model="msg">{{msg.substring(0,1).toUpperCase()+msg.substring(1)}} <p>计算属性:{{getUpper}}</p> <!--普通方法要加括号--> <p>普通方法:{{upperMethod()}}</p> <!--区别是在同一个页面中使用多次计算属性,不会多次执行--> </div> </body> <script> let vm = new Vue({ el: '#box', data: { msg: '', }, computed:{ getUpper(){//依赖的状态改变了,会重新计算 console.log('计算属性') return this.msg.substring(0,1).toUpperCase()+this.msg.substring(1) } }, methods:{ upperMethod(){ console.log('普通方法') return this.msg.substring(0,1).toUpperCase()+this.msg.substring(1) } } }) </script> </html>
3 计算属性和普通方法的区别
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="box"> <input type="text" v-model="msg">{{msg.substring(0,1).toUpperCase()+msg.substring(1)}} <p>计算属性1:{{getUpper}}</p> <p>计算属性2:{{getUpper}}</p> <!--普通方法要加括号--> <p>普通方法1:{{upperMethod()}}</p> <p>普通方法2:{{upperMethod()}}</p> <!--区别是在同一个页面中使用多次计算属性,不会多次执行--> </div> </body> <script> let vm = new Vue({ el: '#box', data: { msg: '', }, computed:{ getUpper(){//依赖的状态改变了,会重新计算 console.log('计算属性') return this.msg.substring(0,1).toUpperCase()+this.msg.substring(1) } }, methods:{ upperMethod(){ console.log('普通方法') return this.msg.substring(0,1).toUpperCase()+this.msg.substring(1) } } }) </script> </html>
4.计算属性重写过滤案列
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script> </head> <body> <div class="app"> <input type="text" v-model="myText"> <br> <ul> <li v-for="data in newdataList">{{data}}</li> </ul> </div> </body> <script> var vm = new Vue({ el: '.app', data: { myText:'', dataList:['a','abc','abandon','c','curd','d','dog','doc'] }, computed:{ newdataList(){ return this.dataList.filter(item=>{ return item.indexOf(this.myText)>-1 }) } } }) </script> </html>