计算属性将两个数字进行相加

最新推荐文章于 2022-11-03 11:47:36 发布

small面包

最新推荐文章于 2022-11-03 11:47:36 发布

阅读量2.4k

点赞数

分类专栏： computed 计算属性 Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_44986077/article/details/104985970

版权

Vue 同时被 3 个专栏收录

22 篇文章

订阅专栏

计算属性

1 篇文章

订阅专栏

computed

0 篇文章

订阅专栏

本文介绍如何在Vue中使用计算属性进行两个数字的加法操作，通过示例代码详细解析实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果如图
在这里插入图片描述
下面是代码解析

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
        computed : 计算属性
          说明 : 1-根据已知值,得到一个新值
                 2-新值随着已知的变化而变化
           区别 : 别人改变,影响到了我    
           值 : 计算属性拿到的一个新值  
      -->
    <div id="app">
      <input v-model="num1"></input>
      +
      <input v-model="num2"></input>
      =
      <span>{{ totalNum }}</span>
    </div>
    //引入vue注意路径
    <script src="./vue.js"></script>
    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          num1: 10,
          num2: 200
        },
        computed: {
          totalNum() {
          //装换成number类型也可以用Number(this.num1)
            return +this.num1 + +this.num2
          }
        }
      })
    </script>
  </body>
</html>