demo.html

 <!DOCTYPE html>

 <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-html="http://www.w3.org/1999/xhtml"

       xmlns:v-on="http://www.w3.org/1999/xhtml">

 <head>

     <meta charset="UTF-8">

     <title>Vue Demo</title>

     <!--自选版本-->

     <!--<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>-->

     <!-- 开发环境版本，包含了有帮助的命令行警告 -->

     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

     <!-- 生产环境版本，优化了尺寸和速度 -->

     <!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->

 </head>

 <body>

 <div id="app">

     <div>

         <h3>computed 计算属性举例</h3>

         <div>

             <p>

                 method在使用时会执行所有方法；<br>

                 computed在使用时只执行相关的操作；<br>

                 computed属性比method更节省资源和性能；在需要复杂计算或耗时较多的操作时使用。<br>

             </p>

         </div>

         <hr>

         <div>

             <h3>method方式实现</h3>

             <button v-on:click="a++" type="button">

                 ADD To A

             </button>

             <button v-on:click="b++" type="button">

                 ADD To B

             </button>

             <p>A : {{a}}</p>

             <p>B : {{b}}</p>

             <p>Age + A = {{ageAddA()}}</p>

             <p>Age + B = {{ageAddB()}}</p>

         </div>

         <hr>

         <div>

             <h3>computed 计算属性方式实现</h3>

             <button v-on:click="c++" type="button">

                 ADD To C

             </button>

             <button v-on:click="d++" type="button">

                 ADD To D

             </button>

             <p>C : {{c}}</p>

             <p>D : {{d}}</p>

             <p>Age + C = {{ageAddC}}</p>

             <p>Age + D = {{ageAddD}}</p>

         </div>

     </div>

 </div>

 <script src="app.js"></script>

 </body>

 </html>

app.js

 var app = new Vue({

     el: '#app',

     data: {

         a: 0,

         b: 0,

         age: 20,

         c: 0,

         d: 0,

     },

     methods: {

         ageAddA: function () {

             console.log("A:" + this.a);

             return this.age + this.a;

         },

         ageAddB: function () {

             console.log("B:" + this.b);

             return this.age + this.b;

         }

     },

     computed:{

         ageAddC: function () {

             console.log("C:" + this.c);

             return this.age + this.c;

         },

         ageAddD: function () {

             console.log("D:" + this.d);

             return this.age + this.d;

         }

     }

 })

截图：

Vue之computed计算属性的更多相关文章

  1. Vue的computed计算属性是如何实现的

    一个开始 有如下代码,full是一个计算属性,开始,他的值是'hello world',1s后,msg变成了‘I like’, full的值同步变成了'I like world';其原理解析来看一下. ...

  2. Vue中computed计算属性

    话不多说,使用方法直接上代码//在模板中调用computedTest这个函数,切记不要在函数后添加()<template> <div class="home"&g ...

  3. Vue中computed(计算属性)、methods、watch的区别

    实现效果:字符串的动态拼接 methods方法 html: <div id="app"> <!-- 监听到文本框数据的改变 --> <input ty ...

  4. vue的computed计算属性

    computed可定义一些函数,这些函数叫做[计算属性] 只要data里面的数据发生变化computed会同步改变 引用[计算属性]时不要加  () ,应当普通属性使用 例:console.log(t ...

  5. Vue的computed(计算属性)使用实例之TodoList

    最近倒腾了一会vue,有点迷惑其中methods与computed这两个属性的区别,所以试着写了TodoList这个demo,(好土掩面逃~); 1. methods methods类似react中组 ...

  6. vue中computed计算属性与methods对象中的this指针

    this 指针问题 methods与computed中的this指针 应该指向的是它们自己,可是为什么this指针却可以访问data对象中的成员呢? 因为new Vue对象实例化后data中的成员和c ...

  7. 小白学习vue第三天，从入门到精通（computed计算属性）

    computed计算属性 <body> <div id="app"> <div>{{myName}}</div> </div& ...

  8. 深入理解 Vue Computed 计算属性

    Computed 计算属性是 Vue 中常用的一个功能,我们今天来说一下他的执行过长 拿官网简单的例子来看一下: <div id="example"> <p> ...

  9. Vue（七）：computed计算属性

    简介 计算属性关键词: computed. 计算属性在处理一些复杂逻辑时是很有用的. 实例1 可以看下以下反转字符串的例子: <div id="app"> {{ mes ...

随机推荐

  1. linux命令之 tar

    参数 -c 创建新归档 -d 比较归档和文件系统的差异 -r 追加文件到归档 -t 存档的内容列表 -x 提取归档所有文件 -C 改变解压目录 -f 使用归档文件或设备归档 -j bzip2 压缩 - ...

  2. ASM problem : ORA-15001: diskgroup "DGROUP1" does not exist or is not mounted ORA-15040: diskgroup is incomplete

    ============================================================= mos中的详细解释: ODA: After Apply ODA 12.2.1 ...

  3. 初学Python——RabbitMQ的安装

    记录踩坑之路,本篇文章主要摘抄自CSDN博客https://blog.csdn.net/weixin_39735923/article/details/79288578 Windows10环境下安装R ...

  4. 浅析mysql中exists 与 in 的使用

    一.exists的使用    exists对外表用loop逐条查询,每次查询都会查看exists的条件语句,当exists里的条件语句能够返回记录行时(无论记录行是的多少,只要能返回),条件就为真,返 ...

  5. Maven入门指南⑦：Maven的生命周期和插件

    一个完整的项目构建过程通常包括清理.编译.测试.打包.集成测试.验证.部署等步骤,Maven从中抽取了一套完善的.易扩展的生命周期.Maven的生命周期是抽象的,其中的具体任务都交由插件来完成.Mav ...

  6. day93之微信推送

    python之微信推送详解 用什么推送   -邮件   -微信推送   -短信推送微信推送   -公众号(不能主动给用户发消息)    -认证的公众号:需要营业执照,需要交钱,可以发多篇文章    - ...

  7. Codeforces Round #545 (Div. 1) Solution

    人生第一场Div. 1 结果因为想D想太久不晓得Floyd判环法.C不会拆点.E想了个奇奇怪怪的set+堆+一堆乱七八糟的标记的贼难写的做法滚粗了qwq靠手速上分qwqqq A. Skyscraper ...

  8. Docker镜像构建

    一.简介 在构建容器化应用时,相当重要的步骤莫过于镜像制作,本文将介绍镜像制作方法以及镜像制作的建议.通常镜像的制作有两种方式: 使用现有的容器使用docker commit 生成镜像 使用Docke ...

  9. 【转】WPF PasswordBox不支持绑定解决方法

    原文地址:https://www.cnblogs.com/wxjing67/p/3935717.html PasswordBox的Password属性因为安全原因不支持直接绑定,可以使用依赖属性实现. ...

  10. C#.NET 大型通用信息化系统集成快速开发平台 4.1 版本 - 访问记录功能改进

    当用户数据非常庞大时需要一个功能,就是统计各种账户的访问系统的情况,用户数量的各种参数需要让管理者心里有个数. 1:信息系统中有多少有效账户?可以很方便能知道具体个数,让管理者心里有个数. 2:某个公 ...