Composition API 和 computed方法生成计算属性

最新推荐文章于 2024-05-23 15:11:31 发布

xyphf_和派孔明

最新推荐文章于 2024-05-23 15:11:31 发布

阅读量485

点赞数

分类专栏： vue.js入门

本文链接：https://blog.csdn.net/xyphf/article/details/117047002

版权

vue.js入门专栏收录该内容

93 篇文章 6 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Composition API 和 computed方法生成计算属性</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>