计算监听属性

计算属性(computed)

1. computed 对象中写函数，函数就可以当属性使用。

2. 计算属性只有在它的相关依赖发生改变时才会重新求值。

小案例：

不要忘记引入 vue.js

# html 代码
    <div id="app01">
         <input type="text" v-model="myText">
         <br>
         <ul v-for="(item, index) in newList" :key="index">
             <li>{{item}}</li>
         </ul>
    </div>


# JavaScript 代码
    let app = new Vue({
        el: '#app01',
        data() {
            return {
                myText: '',
                oldList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],
            }
        },
        computed: {
            newList() {
                let aa = this.oldList.filter((item) => {
                        return item.indexOf(this.myText) >= 0
                })

                return aa
            }
        }
    })

监听属性(watch)

1. watch对象中写函数，函数名就是data中得变量名，只要这个变量发生变化，就会触发该函数的执行。

2. 该函数还应传一个参数，该参数就是data中变量的结果。

小案例：

# html 代码
    <div id="app01">
        <input type="text" v-model="myText">
    </div>


# JavaScript 代码
    let app = new Vue({
        el: '#app01',
        data() {
            return {
                myText: '',
            }
        },
        watch: {
            myText(value) {
                console.log(value);
            }
        }

    })