过滤器
- filter:{}
-
在数据展示前使用
-
只能在v-bind或者插值表达式中使用
-
示例
//利用过滤器输出不同的时间对应不同的文本 <div id='app'> <input type="text" :value="created_at|timerfamatter" />//v-bind <h1>{{created_at|timerfamatter}}</h1>// </div> <script> new Vue({ el: '#app', data: { created_at: "Wed Oct 13 11:35:12 +0800 2021" }, filters: { timerfamatter(created_at) { let sinadt = new Date(created_at) let nowdt = new Date() let absdt = nowdt - sinadt if (absdt <= 0) { return "未知" } else if (0 < absdt && absdt <= 60 * 1000) { return "刚刚" } else if (60 * 1000 < absdt && absdt <= 60 * 1000 * 60) { let m = new Date(absdt).getMinutes() return m + "分钟前" } else if (60 * 1000 * 60 < absdt) { return `${sinadt.getMonth()}-${sinadt.getDate()} ${sinadt.getHours()}:${sinadt.getMinutes()}` } } } }) </script>
-
计算属性
-
computed:{}
-
用法:把computed中的方法当做属性使用,会返回一个数据供使用
-
计算属性和方法的区别
- 计算属性会把使用到的data中的属性缓存起来,防止页面发生大量重复计算,计算属性会把使用到的data中的属性缓存起来,防止页面发生大量重复计算,
- 提升js 运行效率,如果计算属性中使用到的data中那部分数据变了才会重新调用计算属性
- methods方法没有计算结果缓存起来,data任何数据发生改变,方法都会被重新调用一遍
- 方法常常是作用的事件使用,计算属性常常是动态计算结果时使用
-
示例
//利用计算属性来计算菜品总价 <div id='app'> <div v-for="el in arr"> <p>{{el.title}}----单价:{{el.pirce}}---数量:{{el.count}}</p> </div> <button>结算:总价({{total}})</button> </div> <script> new Vue({ el: '#app', data: { arr:[{ id:1, title:"鱼香肉丝", pirce:18, count:2 },{ id:2, title:"水煮肉片", pirce:31, count:1 },{ id:3, title:"米饭", pirce:1, count:3 }] }, computed:{ total(){ let obj=this.arr.reduce((arg1,arg2)=>{ return arg1+arg2.pirce*arg2.count },0) return obj; } } })
属性监听器
-
watch:{}
-
属性监听器中的方法名必须跟要监听的data中的属性名一样,才代表监听指定属性
-
原理:当侦听器监听的属性发生变化时,就会调用watch中对应的方法
-
侦听器属性,比计算属性计算效率消耗大
-
示例
<div id='app'> <p>{{obj.name}}</p> <button type="button" @click="chaneg1">change1</button>//点击该按钮,执行methods中的change1方法,改变obj中的name值,这时监听到name发生改变,执行handler函数,在控制台中打出“name值发生改变” </div> <script> new Vue({ el: '#app', data: { obj:{name:"karen"} }, methods:{ chaneg1(){ this.obj.name="jack" } }, watch:{ obj:{ deep:true, handler:()=>{ console.log(“name值发生改变”) } } } }) </script>