计算属性就是当其依赖的属性的值发生变化的时候，这个属性的值就会自动更新。

例子：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <input id="num" type="text" v-model="msg" />
        <p>{{isEven}}</p>
    </div>
</body>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            _msg: 1,
            NowTime: ""
        },
        computed: { //计算属性
            msg: {
                get: function() {
                    if (this.$data._msg >= 0) {
                        return this.$data._msg;
                    }
                    return 0;
                },
                set: function(value) {
                    var a = parseInt(value);
                    if (a >= 0) {
                        this.$data._msg = a;
                    } else {
                        this.$data._msg = 0;
                    }
                    console.log("msg:" + this.$data._msg);
                }
            },
            isEven: {
                get: function() {
                    if (this.$data._msg % 2 != 0) {
                        return false;
                    } else {
                        return true;
                    }
                }
            },
            isOdd: function() { //只有一个function的时候，就表示get属性
                return false;
            }
        }
    });
</script>

</html>

第三节：Vue计算属性的更多相关文章

  1. Vue计算属性

    github地址:https://github.com/lily1010/vue_learn/tree/master/lesson06 一 计算属性定位 当一些数据需要根据其它数据变化时,这时候就需要 ...

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

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

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

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

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

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

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

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

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

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

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

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

  8. Vue#计算属性

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

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

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

随机推荐

  1. reduce方法

    API里面这样写 reduce(initial, sym) → obj                              reduce(初始值,符号) reduce(sym) → obj re ...

  2. 【转】linux shell实现随机数多种方法（date,random,uuid)

    在日常生活中,随机数实际上经常遇到,想丢骰子,抓阄,还有抽签.呵呵,非常简单就可以实现.那么在做程序设计,真的要通过自己程序设计出随机数那还真的不简单了.现在很多都是操作系统内核会提供相应的api,这 ...

  3. MJExtension笔记(一)

    之前有说,看好的编程就去敲好的开源项目:一直觉得这个无从下手,但是这次跟着一点点敲MJExtension,我明白了这句话的深度:其实并不需要去找,每一个三方项目都有很多值得学习的地方:笔记一只记录在敲 ...

  4. 微信内置浏览器的JS API

    /**! * 微信内置浏览器的Javascript API,功能包括: * * 1.分享到微信朋友圈 * 2.分享给微信好友 * 3.分享到腾讯微博 * 4.新的分享接口,包含朋友圈.好友.微博的分享 ...

  5. [leetcode 48] rotate image

    1 题目 You are given an n x n 2D matrix representing an image. Rotate the image by 90 degrees (clockwi ...

  6. Android Studio 无法启动模拟器的一种可能是你装的是Ghost版的系统

    我遇到的问题是,打开模拟器,进度条走到最后,突然出现了emulator error,然后模拟器就无法启动(不好意思当时没有截图).我是在Ghost版 win7系统下运行Android Studio 的 ...

  7. 使用C#设计Fluent Interface

    我们经常使用的一些框架例如:EF,Automaper,NHibernate等都提供了非常优秀的Fluent Interface, 这样的API充分利用了VS的智能提示,而且写出来的代码非常整洁.我们如 ...

  8. Linux3：more、which、find、chmod、tar、diff、grep、ps、netstat、uname

    more 类似cat,不过more不是将整个文件内容从上到下显示在屏幕上的,而是以一页一页的显示方便使用者逐页阅读.more最基本的指令就是space即往下翻一页,b即往回翻一页显示,而且还有搜索字符 ...

  9. 解析ASP.NET Mvc开发之EF延迟加载

    目录: 1)从明源动力到创新工场这一路走来 2)解析ASP.NET WebForm和Mvc开发的区别 3)解析ASP.NET Mvc开发之查询数据实例 ------------------------ ...

  10. IE浏览器不能自动显示PDF文件的解决办法

    今天更新了Adobe的PDF Reader,更新后发现在网页上无法预览PDF文件了,点击PDF的连接,浏览器就会提示下载或者打开,感觉很不爽,经过一番百度,找到了解决办法,在这里分享一下. 打开IE浏 ...