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. asp.net mvc 配合前端js的CMD模块化部署思想，小思路

    1)布局视图,用于协调普通视图和共享视图,实现js库自由选择引用 @{ //具体页面定义好需要引入的js文件,在这里通过共享视图渲染出来 var jsDefines = ViewBag.JsDefin ...

  2. 删除数据库数据，自增id清理

    方法一:Delete Form 表名 方法二:TRUNCATE TABLE 在功能上与不带 WHERE 子句的 DELETE 语句相同:二者均删除表中的全部行.但 TRUNCATE TABLE 比 D ...

  3. 跟随标准与Webkit源码探究DOM -- 获取元素之getElementsByName

    按照name属性获取多元素 -- getElementsByName 标准 DOM 1 定义在HTMLDocument Interface 中,原型NodeList getElementsByName ...

  4. Twig模版语言入门

    转自 :http://pengbotao.cn/twig-template-language.html Twig中有两种定界符{% ... %} 和 {{ ... }} , 前一种用来执行语句,比如f ...

  5. [原]如何在Android用FFmpeg解码图像

    前一篇[原]如何用Android NDK编译FFmpeg 我们知道了如何使用NDK来编译Android平台下使用的FFmpeg动态库.这篇文章我们就可以使用Android下的JNI来调用FFMpeg进 ...

  6. cocos2d-x开发: 场景实体(entity)管理

    公司现在开新项目,主题的框架部分都是我自己在做,不用受到别人的牵制,所以还算是比较的自由,很好发挥. 游戏并不大,所以需要用到的地方并不多.今天花了一些时间写了场景entity管理的部分代码,还没有完 ...

  7. 实战:ASP.NET MVC中把Views下面的视图放到Views文件夹外

    园子里写的文章的都是把控制器从传统的项目中的Controllers拿出来单独放,但很少几乎没有把视图从Views拿出去这样的文章,今天来写一个. 其实很简单!一步步解决问题就行了,下面记录如下,供需要 ...

  8. LOD设置

    Level of detail: 使用多个不同复杂度的mesh来表示一个object,当物体离摄像机越远时,就是用更加low-detail的mesh,反之越近就越使用越精细的mesh. 组件:LOD ...

  9. AssetBundle系列——游戏资源打包（二）

    本篇接着上一篇.上篇中说到的4步的代码分别如下所示: (1)将资源打包成assetbundle,并放到自定目录下 using UnityEditor; using UnityEngine; using ...

  10. epoll源码实现分析[整理]

    epoll用法回顾 先简单回顾下如何使用C库封装的3个epoll相关的系统调用.更详细的用法参见http://www.cnblogs.com/apprentice89/archive/2013/05/ ...