github地址:https://github.com/manlili/vue_learn里面的lesson06

一 计算属性定位

当一些数据需要根据其它数据变化时,这时候就需要计算属性

二 $watch实现计算属性

举个栗子:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>vue计算属性</title>

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>

    </head>

    <body>

        <div class="test">

            a的值是{{a}}

            b的值是{{b}}

        </div>

        <script type="text/javascript">

            var myVue = new Vue({

                el: ".test",

                data: {

                    a: 1,

                    b: 0

                }

            })

            myVue.$watch("a",function () {

                this.b = this.a+3;

            })

        </script>

    </body>

</html>

正常输出时:a的值是1,b的值为0,但是当在控制台输入:

说明b的数据是根据a变化而变化的

三 computed实现计算属性

上面用$watch可以实现计算属性,但是有点麻烦,首先需要定义b,实例化以后给实例绑定一个$watch方法,下面来看一个更简单的方法实现计算属性

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>vue计算属性</title>

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>

    </head>

    <body>

        <div class="test">

            a的值是{{a}}

            b的值是{{b}}

        </div>

        <script type="text/javascript">

            var myVue = new Vue({

                el: ".test",

                data: {

                    a: 1

                },

                computed: {

                    b: function () {

                        return this.a+3;

                    }

                }

            })

        </script>

    </body>

</html>

上面正常的输出是:a的值是1,b的值是4,但是在控制台输入:

说明b的数据是根据a变化而变化的

四 set实现反计算

多数时候a变化,b跟着a变化,但是有时候我们想让b变化时,a跟着b变化,Vue作者给我们提供了set方法来反计算.

举个栗子:(get是b获取值,set是给b赋新值)

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>vue计算属性</title>

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>

    </head>

    <body>

        <div class="test">

            a的值是{{a}}

            b的值是{{b}}

        </div>

        <script type="text/javascript">

            var myVue = new Vue({

                el: ".test",

                data: {

                    a: 1

                },

                computed: {

                    b:{

                        get: function () {

                            return this.a+3;

                        },

                        set: function (newValue) {  //参数不能少

                            this.a = newValue-1;   //a的值变化也会导致b变化

                        }

                    }

                }

            })

        </script>

    </body>

</html>

上面正常的输出是:a的值是1,b的值是4,但是在控制台输入:

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

  1. 在做vue计算属性，v-for处理数组时遇到的一个bug

    bug: You may have an infinite update loop in a component render function 无限循环 需要处理的数组(在 ** ssq **里): ...

  2. vue教程2-03 vue计算属性的使用 computed

    vue教程2-03 vue计算属性的使用 computed computed:{ b:function(){ //默认调用get return 值 } } ---------------------- ...

  3. vue 计算属性 实例选项 生命周期

    vue 计算属性: computed:{} 写在new vue()的属性,只要参与运算,数据不发生变化时,次计算只会执行一次,结果缓存,之后的计算会直接从缓存里去结果.如果其中的值发生变化(不管几个) ...

  4. Vue计算属性缓存(computed) vs 方法

    Vue计算属性缓存(computed) vs 方法 实例 <div id="example"> <p>Original message: "{{ ...

  5. vue 计算属性实现过滤关键词

    效果 html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <m ...

  6. Vue 计算属性 && 监视属性

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...

  7. 第三节：Vue计算属性

    计算属性就是当其依赖的属性的值发生变化的时候,这个属性的值就会自动更新. 例子: <!DOCTYPE html> <html> <head> <meta ch ...

  8. Vue#计算属性

    在模板中表达式非常便利,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么 Vue.js 将绑定表达式限制为一个表达式.如果需要多于一 ...

  9. 初识Vue——计算属性和观察者

    一.计算属性 在模板内使用 1.基础例子 <template> <div class="main"> <div id="reverse_st ...

随机推荐

  1. 【Xamarin报错】 COMPILETODALVIK : UNEXPECTED TOP-LEVEL error java.lang.OutOfMemoryError: Java heap space

    Xamarin Android 编译报错: COMPILETODALVIK : UNEXPECTED TOP-LEVEL error java.lang.OutOfMemoryError: Java ...

  2. (转)使用Custom Draw实现ListCtrl的重绘

    使用Custom Draw实现ListCtrl的重绘   common control 4.7版本介绍了一个新的特性叫做Custom Draw,这个名字显得模糊不清,让人有点摸不着头脑,而且MSDN里 ...

  3. CentOS安装epel

    Centos5安装    rpm -ivh http://dl.fedoraproject.org/pub/epel/5/i386/epel-release-5-4.noarch.rpm   rpm  ...

  4. struts2整合CKEditor和CKFinder实现上传

    上一篇文章给大家分享了CKEditor+CKFinder+JSP实现了在线编辑器上传图片的功能,这里在给大家分享一下如何在前面的基础上在struts2下实现这样的功能. 实现与Struts2的整合,整 ...

  5. Android事件传递机制

    http://blog.csdn.net/awangyunke/article/details/22047987 1)public boolean dispatchTouchEvent(MotionE ...

  6. C#基础总结之八面向对象知识点总结-继承与多态-接口

    .方法深入讲解(返回值,形参与实参) 方法 public int getName(int i,int j) { int sum = i + j; return sum; } .利用泛型存储对象数据 . ...

  7. HTML注释引起的问题

    因为规范要求需要对页面进行说明,添加作者等信息,所以在cshtml的代码中添加了html注释,包括之前使用jsp也是这样做的: 在页面布局的时候,需要对高度进行动态计算,IE8以上没有问题,主要是在I ...

  8. C# DES加密解密用法

    主要用到C#提供的以下三个类:MemoryStream 内存流DESCryptoServiceProvider 加密服务提供者类CryptoStream 讲数据流连接到加密转换的流 下面是简易代码,已 ...

  9. 剑指架构师系列-InnoDB存储引擎、Spring事务与缓存

    事务与锁是不同的.事务具有ACID属性: 原子性:持久性:由redo log重做日志来保证事务的原子性和持久性,一致性:undo log用来保证事务的一致性隔离性:一个事务在操作过程中看到了其他事务的 ...

  10. 【转载】Linux中强大且常用命令：find、grep

    转载自:http://www.linuxeden.com/html/softuse/20130804/142065.html 在linux下面工作,有些命令能够大大提高效率.本文就向大家介绍find. ...