Vue：计算属性

1.计算属性用来干嘛？

答：用来对data里面的属性进行加工

2.直接为什么不用methods？

答：computed具备缓存功能而methods没有缓存功能

3.如何实现computed？
实现代码 
<!DOCTYPE html>
<html lang="en" xmlns:>
<head>
  <meta charset="UTF-8">
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="js/vue.js"></script>
  <title>Title</title>
</head>
<body>
<div id="firstVue">
  姓：<h1>{{firstname}}</h1>
  名：<h1>{{secondname}}</h1>
  姓名：<h1>{{fullname}}</h1>
  //当调用了很多次fullname_get函数只会调用一次（因为缓存）
  //get调用的时间：1.初始化 2.当关联的属性发生变换时候
  姓名：<h1>{{fullname}}</h1>
  姓名：<h1>{{fullname}}</h1>
  姓名：<h1>{{fullname}}</h1>
</div>
</body>
<script type="text/javascript">
  //关闭生成提示
  Vue.config.productionTip=false;

  let v=new Vue({
    el:"#firstVue",
    data:{
       firstname:"张",
      secondname:"三"
    },
   computed:{
      //computed放的是一个对象并且实例后会并入data
      //对象里面一定要有一个get（）方法 当有人去读取属性fullname（把它当成属性就好）就会调用这个get
      fullname:{

        get(){
          //vue 把这里的this调成了vm实例 get可以直接获得data的属性值
          return this.firstname+this.secondname;
        }
          //不仅仅能写get
        set(){
            this.firstname="ss"

        }
      }

   }
  })
  console.log(v)
</script >
</html>
4.简写computed
computed简写 
//当fullname只是读（get）时候可简写（ES6新写法）
 computed:{
      fullname(){
        return this.firstname+this.secondname;
      }
   }
posted @ 2021-11-08 15:46  旅祸少年  阅读(76)  评论(0)    收藏  举报