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. Win7下使用Telnet命令

    在调试网络端口是否通畅的时候会经常使用到telnet命令,但是在Windows7系统下这个命令默认是不开启的. 开启Telnet命令的方法: 1.在开始程序里,打开控制面板. 2.在控制面板里,点击“ ...

  2. POJ 2234 Matches Game

    Matches Game Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 7567   Accepted: 4327 Desc ...

  3. Qt实现FlatUI样式(开源)

    对于现在做前端开发人员来说,FlatUI肯定不陌生,最近几年扁平化的设计越来越流行,大概由于现在PC端和移动端的设备的分辨率越来越高,扁平化反而看起来更让人愉悦,而通过渐变色产生的质感色彩反而没有扁平 ...

  4. 各种UserAgent的列表

    User Agent是浏览器用于 HTTP 请求的用户代理头的值.更换User Agent能更好的模拟出不同的系统和浏览器信息. Android Name User Agent Nexus 7 (Ta ...

  5. 解决“iOS 7 app自动更新，无法在app中向用户展示更新内容”问题

    转自cocoachina iOS 7能在后台自动app,这对开发者来说和用户都很方便,但是还是有一些缺点.用户不会知道app本次更新的内容,除非他们上到app的App Store页面去查看.开发者也会 ...

  6. (OSP)外包工单关工单失败

    会计同事反映,在关几个外包(OSP)工单时,系统报错.错误讯息如下.检查错误讯息,发现Number of jobs failed in Delivered Quantity : 2.检查工单数据,均无 ...

  7. HANA Studio中修改默认查询结果只显示1000行

  8. 轻量级linux CRUX安装笔记

    感谢hrdd的分享,原文出处:http://wxdhrdd.blog.163.com/blog/static/120500564200952592240867/ 以下是对原文进行补充 crux的安装: ...

  9. Fidder模拟Post请求

    背景 最近想用fidder模拟post请求,怎么都传值失败,发现写Composer => Request Body中写的内容,总是无法映射到mvc的action参数上.百度一番,发现如下解决方案 ...

  10. Java后端书架

    本书架主要针对Java后端开发与架构. 更新记录:4.0版把第五部份-具体技术的书整块拿掉了.<TCP/IP详解 卷1:协议>出到了第二版,增加<SRE:Google运维解密> ...