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

例子：

<!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. 【九度OJ】题目1054：字符串内排序

    题目描述: 输入一个字符串,长度小于等于200,然后将输出按字符顺序升序排序后的字符串. 输入: 测试数据有多组,输入字符串. 输出: 对于每组输入,输出处理后的结果. 样例输入: bacd 样例输出 ...

  2. 编译器错误信息: CS0433: 类型“ASP.usercontrols_total_ascx”同时存在

    “/”应用程序中的服务器错误. 编译错误 说明: 在编译向该请求提供服务所需资源的过程中出现错误.请检查下列特定错误详细信息并适当地修改源代码. 编译器错误信息: CS0433: 类型“ASP.use ...

  3. json排序 摘自百度

    var sortBy = function (filed, rev, primer) {    rev = (rev) ? -1 : 1;    return function (a, b) {    ...

  4. SAP HANA专题分析目录

    针对HANA的关键技术领域, 做深度解析. 1. HANA开发规范 HANA 各种对象的应用解析.版本管理,开发规范. 2. HANA系统管理 用户.系统权限.数据权限的深度解析. HANA系统配置. ...

  5. [转] MySQL 查询表数据大小的总结

    一:关于mysql表数据大小 我们知道mysql存储数据文件一般使用表空间存储 当mysql使用innodb存储引擎的时候,mysql使用表存储数据分为共享表空间和独享表空间两种方式 ·共享表空间:I ...

  6. explode，split，preg_split性能比较

      explode,split,preg_split性能比较 分类: php2012-07-12 09:46 1109人阅读 评论(1) 收藏 举报 三个函数都是用来对字符串进行分割,下面分几个实验来 ...

  7. Java开发视频网站大概需要多少钱？

    这个还真不好说,需要看你对视频网站有什么要求?你的数据库选择的是什么型号的?需要开发几个页面?服务器是需要高端的还是中低端的?还有你对完成时间有什么要求,这些细节也是决定价格的关键因素. 上面这些因素 ...

  8. Sprint评分表

    组名:第七班                                             姓名:王炳午 1.Cs 小分队: 项目: 游戏与办公的集合一些小的程序的整合有2048,倒计时,记 ...

  9. c# 列举所有窗口和子窗口

    private delegate bool WNDENUMPROC(IntPtr hWnd, int lParam); [DllImport("user32.dll", Exact ...

  10. MariaDB+Keepalived双主高可用配置MySQL-HA

    利用keepalived构建高可用MySQL-HA,保证两台MySQL数据的一致性,然后用keepalived实现虚拟VIP,通过keepalived自带的服务监控功能来实现MySQL故障时自动切换. ...