Vue的计算属性computed

computed

	<div id="app">
        <p>{{ num }}</p>
        <p>{{ cnum }}</p>
        <button @click="change">加1</button>
    </div>

<script src="js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                num: 0
            },
            computed: {
                cnum() {
                    //在原有的nnum基础上加10
                    return this.num+10
                }
            },
            methods: {
                change() {
                    this.num ++
                }
            }
            
        })
    </script>

运行结果：
点击按钮后如右图

watch 侦听属性

<div id="app">
        <input type="text" value="cc" v-model="firstName">
        <input type="text" value="zhan" v-model="lastName">
        <p>{{ fullName }}</p>
    </div>

<script src="js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                firstName: "cc",
                lastName: "zhan",
                fullName: "cczhan"
            },
            watch: {
                firstName(val) {
                    this.fullName = val + ' ' + this.lastName
                },
                lastName(val) {
                    this.fullName = this.firstName + ' ' + val
                }
            }
        })
    </script>

以上例子使用computed属性更简便：

	<div id="app">
        <input type="text" value="cc" v-model="firstName">
        <input type="text" value="zhan" v-model="lastName">
        <p>{{ fullName }}</p>
    </div>

<script src="js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                firstName: "cc",
                lastName: "zhan"
            },
            computed:{
                fullName() {
                    return this.firstName + " " + this.lastName
                }
            }
        })
    </script>

参考：计算属性和监听器