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之tmux学习

    Linux之tmux学习 前言 在Linux的世界中,命令行是最优雅的交互方式. 但是,只会使用一个交互终端的程序员,是不足以成为Linux下的大牛的. 那么tmux是什么,引用一下原文介绍 tmux ...

  2. 微信硬件平台（一） 公众号 ESP8266 Arduino LED

    微信硬件平台 本文目的,使用微信公众号控制ESP8266的LED开和关.进一步使用微信当遥控器(避免写APP或者IOS或者小程序),控制一切设备.给两个关键的总教程参考. 官网教程  微信硬件平台 微 ...

  3. 日幣匯率 ( Node-Red 爬蟲 )

    https://tutorials.webduino.io/zh-tw/docs/socket/useful/exchange-node-red.html

  4. docker 12 docker容器数据卷

    数据卷概念 ♣我们知道,当我们把一个运行中的容器关闭后,容器里的数据就没有了(如果你做了docker commit操作,数据会保留到新的镜像里面).所以我们就需要用容器数据卷把容器数据进行持久化储存. ...

  5. 项目Alpha冲刺4

    作业描述 课程: 软件工程1916|W(福州大学) 作业要求: 项目Alpha冲刺(团队) 团队名称: 火鸡堂 作业目标: 介绍第四天冲刺的项目进展.问题困难和心得体会 1.团队信息 队名:火鸡堂 队 ...

  6. Luogu P4169 [Violet]天使玩偶/SJY摆棋子

    传送门 二维平面修改+查询,cdq分治可以解决. 求关于某个点曼哈顿距离(x,y坐标)最近的点——dis(A,B) = |Ax-Bx|+|Ay-By| 但是如何去掉绝对值呢? 查看题解发现假设所有的点 ...

  7. Java IO（三）——字节流

    一.流类 Java的流式输入/输出是建立在四个抽象类的基础上的:InputStream.OutputStream.Reader.Writer.它们用来创建具体的流式子类.尽管程序通过具体子类执行输入/ ...

  8. Linux kprobe调试技术使用

    kprobe调试技术是为了便于跟踪内核函数执行状态所设计的一种轻量级内核调试技术. 利用kprobe技术,可以在内核绝大多数函数中动态插入探测点,收集调试状态所需信息而基本不影响原有执行流程. kpr ...

  9. GitHub Or Subversion

    上一次转载了介绍GitHub的博文点我,我想对于初学GitHub的同学们还是有不清楚的地方,毕竟有些概念的理解比较费力.我觉得作为一个对于配置库技术已经有一定基础的同学们,要学习GitHub,最快以及 ...

  10. H5 28-优先级之权重问题

    28-优先级之权重问题 我是段落 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...