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. xfire框架内部基本结构解析

    1 概述 xfire是webservice的一个实现框架,是apache旗下CXF的前身,是一个比较被广泛使用的webservice框架,网上有很多关于如何使用xfire或cxf的hello worl ...

  2. [CS231n-CNN] Image classification and the data-driven approach, k-nearest neighbor, Linear classification I

    课程主页:http://cs231n.stanford.edu/ Task: Challenges: _________________________________________________ ...

  3. 一个简单的 ASP.NET MVC 例子演示如何在 Knockout JS 的配合下，使用 TypeScript 。

    前言 TypeScript 是一种由微软开发的自由和开源的编程语言.它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程.安德斯·海尔斯伯格,C#的首席架 ...

  4. Intel HAXM安装错误处理：(TV-x) is not turned on

    Android x86模拟器Intel Atom x86 System Image时提示Intel execute disable bit(xd) is not turned on 运行Elicpse ...

  5. Mobiles Wall – 致力于分享最优质的手机壁纸

    大多数人都经常修改手机壁纸,让收集看起来更酷.Mobiles Wall 是一个响应式的网站,致力于分享最优质的手机壁纸,类型非常多,包括:抽象,动物,艺术,汽车,食品及饮料,游戏,照片,电影,音乐,自 ...

  6. sed用例

    文件空行处理 1. 在文件中的每一行后面添加一个空行. sed 'G' test.txt 解释: Get命令是将保留空间的内容取出,并添加到当前模式空间的内容之后(添加一行).当保留空间为空时,效果为 ...

  7. Gradle学习系列之六——使用Java Plugin

    在本系列的上篇文章中,我们讲到了如何自定义Property,在本篇文章中,我们将讲到如何使用java Plugin. 请通过以下方式下载本系列文章的Github示例代码: git clone http ...

  8. 用Qt写软件系列二：QCookieViewer(浏览器Cookie查看器)

    预备 继上篇<浏览器缓存查看器QCacheViewer>之后,本篇开始QCookieViewer的编写.Cookie技术作为网站收集用户隐私信息.分析用户偏好的一种手段,广泛应用于各大网站 ...

  9. 搜索 --- 数独求解 POJ 2676 Sudoku

    Sudoku Problem's Link:   http://poj.org/problem?id=2676 Mean: 略 analyse: 记录所有空位置,判断当前空位置是否可以填某个数,然后直 ...

  10. 【JS复习笔记】00 序

    作为一个前端苦手,说是复习,你就当我是重学好了. 好吧,我当然不可能抱着一个砖头去复习,所以捡了本薄的来读——<JavaScript语言精粹>. 当初带我的人说这本书挺好,就看这本书好了. ...