vue（三）

过滤器

• 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>