计算属性与侦听器

<div id="app">
    <p>商品单价：{{ price }} 元，数量：{{ count }}</p>
    <p>总价：{{ total }} 元</p>
    <p>搜索：<input v-model="keyword"></p>
    <ul>
        <li v-for="item in filtered" :key="item">{{ item }}</li>
    </ul>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const { createApp } = Vue;
createApp({
    data() {
        return { price: 25, count: 3, keyword: "",
                 goods: ["苹果", "香蕉", "葡萄", "西瓜"] };
    },
    computed: {
        total() { return this.price * this.count; },
        filtered() {
            return this.goods.filter(g => g.includes(this.keyword));
        }
    },
    watch: {
        count(n) { console.log("数量变化为", n); }
    }
}).mount("#app");
</script>