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. ios面试技术要点

    iOS面试 技术总结点(可参考):多线程 运行时 runloop app框架 几种动画编程 jsonmodel原理 sdwebimage原理 masonry怎么应用及原理 应用框架有哪些 说一下Fac ...

  2. 百度地图api根据定位获取附近商家（只获取屏幕内）

    根据中心点坐标计算出屏幕2个点(一个最低经纬度,一个最高经纬度),判断这两个点中间的所有坐标的商家..考虑屏幕分辨率之类 移动地图中心点变动,如何异步刷新,判断商家是否已经存在..等... 百度地图a ...

  3. [转]SharePoint开发中可能用到的各种Context（上下文）

    SharePoint是一个B/S结构的产品,所以在开发过程中会使用到各种各样的上下文(Context)信息,借此机会来总结一下.特别是Javascript的Ctx非常实用,这里记录一下! 一.Http ...

  4. Java框架篇---Mybatis 构建SqlSessionFactory

    从 XML 中构建 SqlSessionFactory 基于 MyBatis 的应用都是以一个 SqlSessionFactory 的实例为中心的.SqlSessionFactory 的实例可以通过 ...

  5. 【cs229-Lecture17】离散与维数灾难

    主要内容: 解决MDP问题的算法: 离散化: 模型MDP的同化型: (model/similator) 拟合值迭代算法: Q函数: 近似政策迭代: 笔记转自:http://blog.csdn.net/ ...

  6. iOS开发中一些常见的并行处理(转)

    本文主要探讨一些常用多任务的最佳实践.包括Core Data的多线程访问,UI的并行绘制,异步网络请求以及一些在运行态内存吃紧的情况下处理大文件的方案等.

其实编写异步处理的程序有很多坑!所以,本文 ...

  7. DDD：Can I DDD？

    下面是<实现领域驱动>的作者给出的一段话: You can implement DDD if you have: A passion for creating excellent soft ...

  8. C#语法糖之 ReflectionSugar 通用反射类

    用法很简单: ReflectionSugar rs = new ReflectionSugar(100);//缓存100秒 ,可以不填默认不缓存 rs.有嘛点嘛   性能测试: 性能测试类源码: ht ...

  9. css3照片墙+曲线阴影

    css3照片墙+曲线阴影 最近在学习jquery,晚上想复习下以前学过的知识,看到网上有关于css3照片墙的,感觉挺好玩的,就做了做.(以下图片均来自网络) 一.css3照片墙 html部分: < ...

  10. 分享一下我封装iOS自定义控件的体会，附上三个好用的控件Demo <时间选择器&多行输入框&日期选择器>

    前段时间有小伙伴问到我:"这样的控件该怎么做呢?",我感觉是个比较简单的控件,可能对于入行不久的同志思路没有很清晰吧.趁着最近工作不忙,就来这里分享一下我封装自定义控件的几点体会吧 ...