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

例子：

<!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. iOS进阶_三方使用步骤

    一.配置环境(:后为在终端输入的命令) 打开终端 查看自己电脑的Ruby环境:gem sources -l 如果环境已经是淘宝镜像了,此时不需要再进行环境的修改. 如果不是,发送gem sources ...

  2. ios开发中经常用到的控件

    以下是按照使用频率对ios的控件进行罗列. 1.最常用的UI控件: UIButton (按钮).UILabel (文本标签).UITextField (文本输入框).UIImageView( 图片显示 ...

  3. SQL SERVER 2000数据库置疑处理

    由于服务器意外的断电,导致SQL SERVER服务器上数据库出现“置疑”而无法使用,通过网上搜索,找到以下方法解决问题,这里记录一下: 产生数据库置疑的时侯,数据库文件和日志文件都是存在的,如果数据库 ...

  4. java基础1_Java数据类型

    一 . Java的数据类型分为 1.原生数据类型 也叫基本数据类型,分为整形,浮点型,字符型,布尔型.整形有 byte,short,int,long:浮点型有float,double;字符型有 cha ...

  5. proxyd.c

    /**************************************************************************** * program: proxyd * mo ...

  6. PHP中实现MySQL嵌套事务的两种解决方案

    PHP中实现MySQL嵌套事务的两种解决方案 一.问题起源 在MySQL的官方文档中有明确的说明不支持嵌套事务: Transactions cannot be nested. This is a co ...

  7. Boost 安装

    1.下载boost Windows版,如:boost_1_55_0: 2.运行boostrap.bat,会生成bjam.exe: 3.运行bjam.exe(时间会比较长),会生成一个stage目录里面 ...

  8. poj 3070

    Fibonacci Time Limit: 1000 MS Memory Limit: 65536 KB 64-bit integer IO format: %I64d , %I64u Java cl ...

  9. C++混合编程之idlcpp教程Python篇(5)

    上一篇在这  C++混合编程之idlcpp教程Python篇(4) 第一篇在这 C++混合编程之idlcpp教程(一) 与前面的工程相似,工程PythonTutorial3中,同样加入了三个文件:Py ...

  10. 在CentOS上搭建最^1024基本的Nginx反向服务器

    昨天有过去的同事突然问我,他在CentOS7上试验搭建反向服务器死活不成功.现将最简单的搭建步骤分享下: 0. 环境介绍 本次搭建的集群包括以下服务器 192.168.1.107:nginx反向服务器 ...