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. 03 python 初学（字符格式化输出）

    #_author: lily #_date: 2018/12/16 name = input("your name: ") age = input("your age: ...

  2. GDB 命令回顾

    0) 为使用 GDB, 编译时需要加入调试信息 -g 选项,例如, $ gcc -g test.c -o test 1) 使用 GDB 开始调试 $ gdb test 也可以, $ gdb $ fil ...

  3. Spring Security（十五）：5.6 Authentication

    Thus far we have only taken a look at the most basic authentication configuration. Let’s take a look ...

  4. mysql 查看当前使用的配置文件my.cnf的方法

    my.cnf是mysql启动时加载的配置文件,一般会放在mysql的安装目录中,用户也可以放在其他目录加载. 安装mysql后,系统中会有多个my.cnf文件,有些是用于测试的. 使用locate m ...

  5. switch and checkbox

    import 'package:flutter/material.dart'; void main()=>runApp(MyApp()); class MyApp extends Statele ...

  6. lwip TCP client & FreeRTOS 打开TCP 的 保活机制 LWIP_TCP_KEEPALIVE==1

    参考大神教程:http://blog.sina.com.cn/s/blog_62a85b950101aw8x.html   老衲五木 :http://blog.sina.com.cn/s/blog_6 ...

  7. WPF touch Scroll -触摸滚动

    借鉴地址:http://matthamilton.net/touchscrolling-for-scrollviewer 改造后支持上下和左右鼠标拖动滚动: using System; using S ...

  8. JasperReport制作行内容合并的表格

    效果图: 实现思路一: 交叉表 另一个思路: 普通表格 缺点:无法实现内容 垂直居中显示 准备工作 一.数据准备 DROP TABLE IF EXISTS `address_item_sex_valu ...

  9. Java函数式编程和lambda表达式

    为什么要使用函数式编程 函数式编程更多时候是一种编程的思维方式,是种方法论.函数式与命令式编程的区别主要在于:函数式编程是告诉代码你要做什么,而命令式编程则是告诉代码要怎么做.说白了,函数式编程是基于 ...

  10. 微软Ignite2018——微软宣布新的学习平台：Microsoft Learn

    Ignite 2018 首日感受 头一次参加美国的微软 Ignite 大会,确实规模比国内的大不少.23日是 MVP & RD 的 Pre Day(MVP即Most Valuable Prof ...