您现在的位置是:首页 > 编程 > 

【Vue 从入门到实战 进阶式掌握完整知识体系】04

2025-07-24 00:00:26
【Vue 从入门到实战 进阶式掌握完整知识体系】04 5、computed方法生成计算属性简单使用代码语言:javascript代码运行次数:0运行复制<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta h

【Vue 从入门到实战 进阶式掌握完整知识体系】04

5、computed方法生成计算属性

简单使用
代码语言:javascript代码运行次数:0运行复制
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>了解循环</title>
  <!-- 引入Vue库 -->
  <script src="@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>

  ct app = ({
    setup(){
      ct { ref, computed } = Vue;
      ct num = ref(0);
      function handleClick(){
        num.value ++;
      }
      // 计算属性
      ct computedum = computed(() => {
        return num.value + 5;
      });
      return {
        num, handleClick,computedum
      }
    },
    template: `
    <div>
      <span @click="handleClick">{{num}} -- {{computedum}}</span>
    </div>`
  });
  
  ct vm = ('#root');
</script>

</html>
运行结果
image-2021061521658704
计算属性内使用get和set方法
代码语言:javascript代码运行次数:0运行复制
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>了解循环</title>
  <!-- 引入Vue库 -->
  <script src="@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>

  ct app = ({
    setup(){
      ct { ref, computed } = Vue;
      ct num = ref(0);
      function handleClick(){
        num.value ++;
      }
      // 计算属性
      let computedum = computed({
        get: () => {
          return num.value + 5;
        },
        set: () => {
          // 注意这里我们改的是 num
          num.value = 100;
        }
      });
      // 定时器:三秒后修改 computedum 的值
      setTimeout(() => {
        computedum.value = 1;
      }, 000);
      return {
        num, handleClick,computedum
      }
    },
    template: `
    <div>
      <span @click="handleClick">{{num}} -- {{computedum}}</span>
    </div>`
  });
  
  ct vm = ('#root');
</script>

</html>
运行结果
image-202106152228240
使set接收参数
代码语言:javascript代码运行次数:0运行复制
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>了解循环</title>
  <!-- 引入Vue库 -->
  <script src="@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>

  ct app = ({
    setup(){
      ct { ref, computed } = Vue;
      ct num = ref(0);
      function handleClick(){
        num.value ++;
      }
      // 计算属性
      let computedum = computed({
        get: () => {
          return num.value + 5;
        },
        set: parameter => {
          // 注意这里我们改的是 num
          num.value = parameter - 5;
        }
      });
      // 定时器:三秒后修改 computedum 的值
      setTimeout(() => {
        computedum.value = 1000;
      }, 000);
      return {
        num, handleClick,computedum
      }
    },
    template: `
    <div>
      <span @click="handleClick">{{num}} -- {{computedum}}</span>
    </div>`
  });
  
  ct vm = ('#root');
</script>

</html>
运行结果
image-2021061522654292
使用对象
代码语言:javascript代码运行次数:0运行复制
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>了解循环</title>
  <!-- 引入Vue库 -->
  <script src="@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>

  ct app = ({
    setup(){
      ct { reactive, computed } = Vue;
      ct numObj = reactive({num: 0});
      function handleClick(){
         ++;
      }
      // 计算属性
      let computedum = computed({
        get: () => {
          return  + 5;
        },
        set: parameter => {
          // 注意这里我们改的是 num
           = parameter - 5;
        }
      });
      // 定时器:三秒后修改 computedum 的值
      setTimeout(() => {
        computedum.value = 1000;
      }, 000);
      return {
        numObj, handleClick,computedum
      }
    },
    template: `
    <div>
      <span @click="handleClick">{{}} -- {{computedum}}</span>
    </div>`
  });
  
  ct vm = ('#root');
</script>

</html>
运行结果
image-20210615221579
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。 原始发表:2021-07-01,如有侵权请联系 cloudcommunity@tencent 删除apicompositionvue定时器入门

#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可,转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格

本文地址:http://www.dnpztj.cn/biancheng/1199983.html

相关标签:无
上传时间: 2025-07-23 17:26:40
留言与评论(共有 7 条评论)
本站网友 性保健常识
12分钟前 发表
() => { return num.value + 5; }
本站网友 配天
23分钟前 发表
computedum } }
本站网友 一小时零食网
23分钟前 发表
initial-scale=1.0"> <title>了解循环</title> <!-- 引入Vue库 --> <script src="@next"></script> </head> <body> <div id="root"></div> </body> <script> ct app = ({ setup(){ ct { ref
本站网友 33aacc
2分钟前 发表
原始发表:2021-07-01
本站网友 线上漫画
26分钟前 发表
handleClick
本站网友 后台管理系统模板
21分钟前 发表
computed } = Vue; ct numObj = reactive({num