Vue 中计算属性(computed)和侦听器(watch)

Vue 中计算属性(computed)和侦听器(watch)

<template>
    <div>
        <p>原始字符串: {{ message }}</p>
        <p>计算后反转字符串: {{ reversedMessage }}</p>
        
        
        <input type="text" v-model="foo" style=" 50px"> +
        <input type="text" v-model="bar" style=" 50px">
        <span>computed__求和__ <font color="#ff6b81">{{all}}</font></span>
        <ul v-for="(item) in allArr">
            <li v-if="item.id==2">{{item.name}} <font color="#ff6b81">{{item.price}}</font> 元</li>
            <li v-else>{{item.name}} <font>{{item.price}}</font> 元</li>
        </ul>
        
        
        <br>
        <br>
        <br>
        <input type="text" v-model="allCount">
        <font color="#ff6b81">watch__{{allCountWatch}}</font>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                message: 'Hello wolrd!',
                foo: 1,
                bar: 3,
                feiFoo: [
                    {id: 1, name: "史记 ___ ", price: 100},
                    {id: 2, name: "汉书 ___ ", price: 200},
                ],
                allCount: "开始监听",
                allCountWatch: "监后开始做事情",
            }
        },
        computed: {
            reversedMessage () {
                return this.message.split('').reverse().join('')
            },
            all () {
                this.feiFoo[1].price = Math.floor(Math.random()*10000);
                return Number(this.foo) + Number(this.bar);
            },
            "allArr":function (a,b) {
                return this.feiFoo;
            }
        },
        watch:{
            allCount(val) { // 监听到后做其他事情
                console.log(val);
                this.allCountWatch = `已经监听到__${val}`;
            }
        }
    };
</script>

<style scoped>
 
</style>

计算属性和侦听器