vue学习笔记--计算属性

基础例子：

    <div id="example">
        <p>A message: "{{message}}"</p>
        <p>B reversed message: "{{reversedMessage}}"</p>
    </div>

    <script>
        var vm = new Vue({
            el: "#example",
            data: {
                message: 'hello',
            },
            computed: {
                reversedMessage: function() {
                    return this.message.split('').reverse().join('')
                }
            }
        })

输出结果：

A message hello

B reversed message olleh

例子2：

    <div id="example">
        {{ fullName }}
    </div>

    <script>
        var vm = new Vue({
            el: "#example",
            data: {
                firstName: 'Foo',
                lastName: 'Bar',
                fullName: 'Foo Bar'
            },
            watch: {
                firstName: function(val) {
                    this.fullName = val + ' ' + this.lastName
                },
                lastName: function(val) {
                    this.fullName = this.firstName + ' ' + val
                }
            }

        })
    </script>

    <div id="example">
        {{ fullName }}
    </div>

    <script>
        var vm = new Vue({
            el: "#example",
            data: {
                firstName: 'Foo',
                lastName: 'Bar',
            },
            computed: {
                fullName: function() {
                    return this.firstName + ' ' + this.lastName;
                }
            }

        })
    </script>

以上两段代码等同.

二、监听器

    <div id="root">
        姓：<input type="text" v-model="firstName"> 名:
        <input type="text" v-model="lastName">
        <br>
        <div>{{fullName}}</div>
        <div>{{count}}</div>
    </div>

    <script>
        new Vue({
            el: "#root",
            data: {
                firstName: "",
                lastName: "",
                count: 0,

            },
            //计算属性
            computed: {
                fullName: function() {
                    return this.firstName + " " + this.lastName;
                }
            },
            //监听器
            watch: {
                // firstName: function() {
                //     this.count++
                // },
                // lastName: function() {
                //     this.count++
                // }
                fullName: function() {
                    this.count++
                }
            }
        })
    </script>