【Vue】computed计算属性案例，computed计算属性实战案例

计算属性得出来的值，跟data中的变量是一样的，可以用来使用
但是优先级比data低，如果computed中的属性与data中相同的话，在页面中使用会优先使用data中的数据，来看案例。

<!-- computed计算属性实战 -->
<template>
  <div class="container">
    {{ msg }}
    <div v-for="item in studentList" :key="item.id">
      {{ item.name }}
    </div>
  </div>
</template>
 <script>
export default {
  name: "newVue",
  data() {
    return {
      msg: "computed计算属性实战",
      studentList: [
        {
          id: 1,
          name: "张三",
          age: 16,
        },
        {
          id: 2,
          name: "李四",
          age: 18,
        },
        {
          id: 3,
          name: "王五",
          age: 120,
        },
      ],
    };
  },
  computed: {
    studentList: function () {
      return this.studentList.filter((item) => {
        return item.age >= 18;
      });
    },
  },
};
</script>
<style scoped  lang='less'>
</style>

这里我做了一个计算属性，想把年龄大于等于18岁的显示出来，小于18的就过滤掉

可以看到，studentList属性在data中也有，在computed中也有，但是实际上会使用谁呢？

这里用的是data中的变量，如果将computed中的返回值改个名字，就会用到它。
并且因为重名，控制台会报错，所以不要这样使用，可以使用filters过滤器
详情见上一篇文章
filters过滤器实战案例