第三节、计算属性

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

例子:

<!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>
时间: 11-28

第三节、计算属性的相关文章

vue2.0 之计算属性和数据监听

计算属性computed <template> <div> <input type="text" name="" v-model="myVal"><br/> {{ myValueWithoutNum }}<br/> {{ getMyValueWithoutNum() }}<br/> </div> </template> <script> e

Vue之计算属性

上一篇里演示了计算属性的优点,但是,computed和data里的属性还是有区别的,computed的一个弱点就在于依赖于data属性的更新,才能触发视图更新. 举个例子: 上个例子中谈到用v-for来加载妹子图片,现在我想在原先的基础上,添加两个按钮,一个用来增加一个妹子,一个用来减少一个妹子: html: <div id="vfor"> <template v-for="mm in mms"> <span>{{mm.name}

vue入门(二)----模板与计算属性

其实这部分内容我也是参考的官网:http://cn.vuejs.org/v2/guide/syntax.html,但是我还是想把自己不懂的知识记录一下,加深印象,也可以帮助自己以后查阅.所谓勤能补拙. 首先我们说一下模板,其实如果看过第一节vue入门----组件,我们会知道更好更科学的办法是通过创建组件的方式,这种方式允许我们任意进行组件的嵌套.而通过模板的方式的话,个人觉得效果并没有组件好.行,开始切入正题,现在我们首先通过一下几点来进行学习(其实是按照官网的顺序记录自己不懂的知识点). 1.

Swift类与结构、存储属性、计算属性、函数与方法、附属脚本等

写了12个Person来复习,不过完成同样的代码需要敲键盘的次数相比OC确实少了很多,这很多应该归功于Swift中不写分号,以及少了OC中的中括号. 一.类与结构体 两者在Swift中差不了多少了 类与结构体有很多相同的地方: (第2,3点是其他语言中不存在的) 1)都可以定义属性/方法/下标(结构体也可以定义方法了) 2)都能初始化(通过构造方法) 3)都能使用扩展(extension)与协议(protocol) 4)类与结构体(枚举)中的全局属性/方法:在类中用class关键字,但在结构体中

Swift::2::计算属性

计算属性(Computed Properties) 属性 属性一般用于类(class),结构体(struct),枚举(emun)作为存储数据,swift 的属性也像OC一样,拥有 getters 和 setters方法. 而所谓的计算属性,和一般的属性的区别,仅仅是它不存储数据,而是使用已有的属性(有存储作用的属性),进行运算,而后通过getter 和 setter 反馈结果. 下面是一个例子,例子中自定义一个时间类,类中,seconds 是唯一的存储属性,而miniutes,hours,day

vue.js基础知识篇(3):计算属性、表单控件绑定

第四章:计算属性 为了避免过多的逻辑造成模板的臃肿不堪,可使用计算属性来简化逻辑. 1.什么是计算属性 <!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="example"> <

Swift中对计算属性的理解和对之前的补充

这个功能的重点作用应该是在计算上. 对于一般的属性,要么直接存一个,要么直接读一个,计算属性则可以根据所设置内容,进行一些修改或计算之类的, 比如: import UIKit class sample { var no1 = 0.0, no2 = 0.0 var length = 300.0, breadth = 150.0 var middle:(Double,Double) { get { return(length / 2, breadth / 2) } // 如果没有加上括号, 那么默认

vue学习笔记 计算属性(四)

计算属性就是vue实例里的computed属性,对应一个对象,里面可以放各种方法,方法的作用就是可以生成和数据变量对应的计算后的变量,跟数据相关的复杂逻辑变量,都可以使用计算属性实现,computed里的函数名,对外就是一个变量,默认是getter. <div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed mess

【iOS】Swift类与结构、存储属性、计算属性、函数与方法、附属脚本等

写了12个Person来复习,不过完成同样的代码需要敲键盘的次数相比OC确实少了很多,这很多应该归功于Swift中不写分号,以及少了OC中的中括号. 一.类与结构体 两者在Swift中差不了多少了 类与结构体有很多相同的地方: (第2,3点是其他语言中不存在的) 1)都可以定义属性/方法/下标(结构体也可以定义方法了) 2)都能初始化(通过构造方法) 3)都能使用扩展(extension)与协议(protocol) 类比结构体多的功能: 1)能继承 2)运行时能检查类对象的类型 3)析构释放资源