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. VS2015中配置Eigen

    Eigen非常方便矩阵操作,当然它的功能不止如此.矩阵操作在算法研究过程中,非常重要,例如在图像处理中二维高斯拟合求取光斑中心时使用Eigen提供的矩阵算法,差不多十来行代码即可实现. 1)下载Eig ...

  2. Y7000 （1）安装ubuntu1604遇到的问题

    1安装系统 分区的时候 /boot  不再是引导分区 换成 “为系统bois保留的分区” 这个分区取代 /boot 2第一次进系统没有图形界面 在刚开机 ubuntu系统时 按e 在splash后面空 ...

  3. hyperledger中文文档学习-2-简介

    参考https://hyperledgercn.github.io/hyperledgerDocs/blockchain_zh/ Hyperledger区块链框架(https://blog.csdn. ...

  4. day12--装饰器

    定义(如何理解装饰器):装饰器本生是闭包函数的一种应用,是指在不改变原函数的情况下为原函数添加新的功能的一个函数.它把被装饰的函数作为外层函数的参数传入装饰器,通过闭包操作后返回一个替代版函数. 遵循 ...

  5. mysql 数据库磁盘占用量统计

    查看某个表的磁盘占用量 select (data_length+index_length)/1024/1024 M from information_schema.tables where table ...

  6. 初学Python——面向对象（二）

    一.抽象类.接口类和抽象接口 转自博客园魏恒https://www.cnblogs.com/weihengblog/p/8528967.html (一)接口类 什么是接口类?在继承中,我们可以声明某个 ...

  7. postman简介及基本用法

    从分层测试角度来说,接口测试是相对来说性价比最高的,且作为功能测试进阶的必备技能,接口测试值得大家都去学习掌握. 工欲善其事,必先利其器,好的工具能更好的帮助工程师更高效率的完成工作. 常见的接口测试 ...

  8. Mysql数据库表被锁定处理

    1.查进程,查找被锁表的那个进程的ID show processlist; command 为waitting的就是锁住的表,info为执行某条语句的信息,id为进程. 2.kill掉锁表的进程ID ...

  9. Asp.net MVC 利用(aspose+pdfobject.js) 实现在线预览word、excel、ppt、pdf文件

    在线预览word.excel.ppt利用aspose动态生成html 主要代码 private bool OfficeDocumentToHtml(string sourceDoc, string s ...

  10. Django 中的 cookie 和 session

    一.cookie 由于HTTP协议是无状态的,而服务器端的业务必须是要有状态的.Cookie诞生的最初目的是为了存储web中的状态信息,以方便服务器端使用.比如判断用户是否是第一次访问网站.目前最新的 ...