基本使用

.<template>
  <div>
    <p>{{ msg }}</p>
    <!-- 输出hello -->
    <input type="text" v-model="msg" />
    <!-- 绑定v-model后,只要数据发生变化就会自动触发计算属性 -->
    <p>{{ getmsg }}</p>
    <!-- 像属性一样使用,输出hello-->
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: "hello",
    };
  },
  computed: {
    getmsg() {
      // 依赖项:就是计算属性中通过this来使用的数据
      let temp = this.msg;
      return temp;
    },
  },
};
</script>

<style>
</style>

效果

大量使用

<p>{{ getmsg }}</p>
<p>{{ getmsg }}</p>
<p>{{ getmsg }}</p>
<p>{{ getmsg }}</p>
<p>{{ getmsg }}</p>

效果

如果用methods方法大量调用

 methods: {
    getmsg() {
      // 依赖项:就是计算属性中通过this来使用的数据
      let temp = this.msg;
      console.log(1);
      return temp;
    },
  },

 <p>{{ getmsg() }}</p>
 <p>{{ getmsg() }}</p>
 <p>{{ getmsg() }}</p>
 <p>{{ getmsg() }}</p>
 <p>{{ getmsg() }}</p>

效果

总结:

作用:1.可以监听指定的属性值的变化,进而做出处理,并返回处理的结果 2.它可以监听计算属性中依赖项的变化,如果依赖项发生变化,就会自动的调用计算属性 a:依赖项:就是计算属性中通过this来使用的数据 b:可以将同一函数定义为一个方法methods,两种方式最终结果是完全一样的.不同的是计算属性是基于它们的响应式依赖进行缓存,意思是如果计算属性中的依赖项没有发生变化,那么多次调用计算属性,并不会真正的执行计算属性,而是使用第一次计算的缓存结果,这样在页面大量使用的情况下,可以提升处理效率 看起来是函数,用起来是属性

实用示例:使用计算属性筛选数据

需求:在输入框输入关键字,匹配数据. 思路:1.v-model动态获取搜索框数据 2.filter或for方法匹配 3.渲染

<template>
  <div id="app">
    <div class="add">
      <!-- 1.1 v-model获取搜索框内容 -->
      品牌名称:<input
        type="text"
        placeholder="请输入搜索条件"
        v-model="userkey"
      />
    </div>
    <div>
      <table class="tb">
        <tbody>
          <tr>
            <th>编号</th>
            <th>品牌名称</th>
          </tr>
          <!-- 3.渲染 -->
          <tr v-for="(value, index) in getlist" :key="index">
            <td>{{ value.id }}</td>
            <td>{{ value.name }}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <!-- 直观观察计算属性变化 -->
    <p>{{ getlist }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: {
        id: "",
        name: "",
      },
      //   1.获取搜索框内容
      userkey: "",
      //数组
      list: [
        {
          id: 1,
          name: "QQ",
        },
        {
          id: 2,
          name: "WW",
        },
        {
          id: 3,
          name: "EE",
        },
      ],
    };
  },
  computed: {
    // 2.计算属性
    getlist() {
      //将搜索框的内容匹配数组,执行回调函数,如果回调函数执行结果返回了true,存入filter创建的空数组中,返回
      return this.list.filter((v) => {
        return v.name.toUpperCase().indexOf(this.userkey.toUpperCase()) != -1;
      });

      //   console.log(this.userkey);
      //   let arr = [];
      //   for (let i = 0; i < this.list.length; i++) {
      //     if (
      //       this.list[i].name.toUpperCase().indexOf(this.userkey.toUpperCase()) !=
      //       -1
      //     ) {
      //       arr.push(this.list[i]);
      //     }
      //   }
      //   return arr;
    },
  },
};
</script>

<style>
</style>

效果