Vue计算属性

最新推荐文章于 2023-04-20 15:50:35 发布

BirdMan98

最新推荐文章于 2023-04-20 15:50:35 发布

阅读量197

点赞数

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_41405524/article/details/125988650

版权

Vue 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

介绍

Vue中的计算属性，实现类似函数的功能，主要实现修改数据的业务

效果

在这里插入图片描述

代码

computed计算属性中get函数返回处理的值，set函数有个参数可以设置默认值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>lesson 38</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="root"></div>
</body>
<script>
  // computed 计算属性
  const app = Vue.createApp({
    setup() {
      const { reactive, computed } = Vue;
      const countObj = reactive({ count: 0});
      const handleClick = () => {
        countObj.count += 1;
      }
      let countAddFive = computed({
        get: () => {
          return countObj.count + 5;
        },
        set: (param) => {
          countObj.count = param - 5;
        }
      })

      setTimeout(() => {
        countAddFive.value = 100;
      }, 3000)

      return { countObj, countAddFive, handleClick }
    },
    template: `
      <div>
        <span @click="handleClick">{{countObj.count}}</span> -- {{countAddFive}}
      </div>
    `,
  });
  
  const vm = app.mount('#root');
</script>
</html>