第三节计算属性

Posted 2020-08-21

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了第三节计算属性相关的知识，希望对你有一定的参考价值。

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

例子：

<!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>

以上是关于第三节计算属性的主要内容，如果未能解决你的问题，请参考以下文章

(计算机组成原理)第三章存储系统-第三节1：SRAM和DRAM芯片以及DRAM的属性和地址线复用技术

Web前端开发笔记——第三章 CSS语言第三节文本字体背景超链接样式属性

第三节构造一个简单的Linux系统MenuOS

第三节课

概述-第三节：计算机网络的定义功能分类