计算属性

标签：教程   app   计算属性   文本   join   code   计算   处理   turn   

在处理用户输入中，我编写了一个小栗子。在处理事件时，需要用到mehods属性，在其中做数据处理，响应用户交互事件。

看下面的栗子

<div id="app1">
    <p>{{reverseMess1}}</p>
</div>

new Vue({
    el: "#app1",
    data: {
        mess1: "一段测试文本"
    },
    computed: {
        reverseMess1: function(){
            this.mess1 = this.mess1.split("").reverse().join("");
            return(this.mess1);
        }
    }
});

这个栗子中，我将数据处理之后作为函数的返回值绑定在DOM结构中。这个过程中不涉及任何事件交互。

教程中说，可以将computed替换为methods。这纯属扯淡。这样做会报错。

通过实验，我觉得，绑定交互事件用methods，页面初始化等工作放在computed中。

----------------

不对劲，将上面的代码稍作改动

<p>{{mess1}}</p>

显示的是反转之前的mess1。

也就是说，页面数据会先按data属性排好，之后再调用computed中的函数。

那这样computed就不能作为页面初始化来使用了啊。

再议。

计算属性

标签：教程   app   计算属性   文本   join   code   计算   处理   turn   

原文地址：http://www.cnblogs.com/jiaoxuanwen/p/6923102.html