vue计算属性

使用场景

如果一个结果需要依赖data中的数据，但是需要经过一些逻辑处理，才能得到想要的数据，那我们可

以使用计算属性

在vue实列中 computed配置项

{
    data(){},
    methods: {}
    // 声明计算属性
    computed: {
        //属性名字（计算属性名称）
        //属性的值（计算属性处理函数）
        计算属性名1 () {
            // 对依赖的数据进行处理，且进行return
            return 
        }，
        计算属性名2 () {
            // 对依赖的数据进行处理，且进行return
            return 
        }
    }
}

} } })

computed 是vue的配置选项，它的值是一个对象，其中可定义多个计算属性，每个计算属性就是一个函数。

属性名称：计算属性的名称
属性的值：计算属性的素材函数

- 对需要依赖的数据，进行逻辑上的处理
- 处理完毕后，需要return出去，返回的值就是计算属性的值
使用格式

在两个地方使用：

模板

- 用插值表达式 {{计算属性名}}
- 用其它指令

在实例内

- this.计算属性名当我们在模板中来显示一份经过对数据项进行复杂计算之后的结果时，我们有两种解决方案：
计算属性
函数

应该如何选择？

答：

methods定义函数，如果在模板中使用，每使用一次，就相当于调用了一次，处理逻辑会重新执行。
computed定义计算属性，如果在模板中使用，使用多次，但是如果依赖的数据不发生改变，计算属性对应的函数不会重新执行。

- 计算属性会做缓存，提高渲染的性能。

计算属性完整写法

computed: {
    "属性名": {
        set(值){
            
        },
        get() {
            return "值"
        }
    }
}

效果图是这样

案列来练习

<template>
  <div>
    <span>全选:</span>
    <input type="checkbox" v-model="ischeckedAll" />
    <button>反选</button>
    <ul>
      <li v-for="item in arr" :key="item.name">
        <input type="checkbox" v-model="item.checked" />
        <span>{{item.name}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        {
          name: "猪八戒",
          checked: false,
        },
        {
          name: "孙悟空",
          checked: false,
        },
        {
          name: "唐僧",
          checked: false,
        },
        {
          name: "白龙马",
          checked: false,
        },
      ],
    };
  },
  computed:{
   ischeckedAll:{
     get(){
       return this.arr.every(item=>item.checked===true)
     },
     set(value){
       console.log(value)
       this.arr.forEach(item=>item.checked=value)
     }
   }
  }
};
</script>

<style>
</style>

过滤器

目标：

理解过滤器的作用和使用场景
掌握定义和使用过滤器。

问题导入

对金额和时间做格式化

作用

过滤器的作用：转换格式, 把数据在显示之前做格式转换

格式

定义的格式

{
    data(){},
    computed:{},
    methods:{},
    // 定义过滤器
    filters: {
      // 属性名称（过滤器名称）：属性的值（过滤器处理函数）
      myFilter:function(value,其它参数){
           return 过滤后的结果
      }
    }
}

使用的格式

// 不带参数
{{ msg | 过滤器}}
// 带参数
{{ msg | 过滤器(参数)}}

示例：带参数的过滤器

把时间戳转成年-月-日格式

filters: {
          // 过滤器的定义
          // 属性名称（过滤器名称）：属性的值（过滤器处理函数）
          // myFilter: function(value,其它参数) {

          // }
          fFormatDate: function (val) {
            console.log('val', val)
            // val 就是需要被过滤器处理的值
            // return '你被过滤了' + val
            const dt = new Date(val)
            return dt.getFullYear() + '-' + (dt.getMonth()+1) + '-' + dt.getDate()
          }
        }

调用：

日期:{{ timeStamp | fFormatDate}},

注意：

它的工作过程就是函数的调用执行过程。
过滤器本质是一个函数：它的接收的参数是格式化之前的数据及格式化的参数，它的返回值是格式化之间的值

小结

过滤器使用场景：对于拿到的数据在显示到页面的过程中，如果发现格式不是我们想要的，可以通过过滤器去转下格式。它一定需要入参，入参表示要转格式的数据。

计算属性：对于拿到的数据进行加工，以得到新的数据项。它不需要入参，因为它需要的数据在函数内部都可以通过this.XXX来获取到。

在vue3中已经不再支持过滤器了!

<template>
  
<div>
  <h1>评论区</h1>
  <input type="text" placeholder="请输入评论" v-model="msg">
  <p>返回的内容是:{{msg | filMsg}}</p>
</div>
</template>

<script>
export default {
  name:'Student',
data() {
  return {
    msg:"坤坤",
  }
},
filters:{
  filMsg(value){
    if(value.indexOf('垃圾')!=-1){
      return value.replace('垃圾','**')
    }else{
      return value
    }
  }
}
}
</script>

<style>

</style>

vue计算属性 和 过滤器