条件渲染、计算属性和侦听器、计算属性与侦听器之间的区别

1. 条件渲染 v-if,v-show

    <div class="app">
        <!-- 单分支 -->
        <p v-if="flag">{{msg}}</p>
        <button @click="flag= !flag" v-text="tips = flag ? `隐藏` : `显示`"></button>
        <!-- 多分支 -->
        <p v-if="point > 1000 && point <2000">{{grade[0]}}</p>
        <p v-else-if="point >= 2001 && point < 3000">{{grade[1]}}</p>
        <p v-else-if="point >= 3001 && point < 4000">{{grade[2]}}}</p>
        <p v-else-if="point >=4000">{{grade[3]}}</p>
        <p v-else>{{grade[4]}}</p>
        <!-- v-show -->
        <p v-show="status">Hello World!</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const vm = new Vue({
            el: '.app',
            data() {
                return {
                    msg: 'php中文网',
                    flag: true,
                    tips: "隐藏",
                    point: 4500,
                    grade: [
                        "木头会员",
                        "石头会员",
                        "金牌会员",
                        "终身会员",
                        "只对会员开放",
                    ],
                    status: true,
                }
            }
        })
    </script>

---

2.计算属性和侦听器

• 计算属性
  

    <div class="app">
        <p>
            数量：
            <input type="number" v-model="num" style="width:5em" min="0" />
        </p>
        <p>单价：{{price}} 元</p>
        <!-- <p>金额：{{num * price}} 元</p> -->
        <!-- 计算属性，本质上就是原生的访问器属性 -->
        <p>金额：{{amount}} 元</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const vm = new Vue({
            el: document.querySelector(".app"),
            data() {
                return {
                    num: 0,
                    price: 50,
                    res: 0,
                }
            },
            // 计算属性：最终会和data合并，所以不要和data中已有属性重名
            computed: {
                // amount() {
                //     return this.num * this.price;
                // },
                amount: {
                    get() {
                        return this.num * this.price;
                    },
                    set(value) {
                        console.log(value);
                        if (value > 1000) this.price = 40;
                    },
                },
            },
        });
        vm.amount = 1001;
    </script>

• 侦听器

    <div class="app">
        <p><input type="number" v-model="num" style="width:5em" min="0" :max="max"></p>
        <p>单价：{{price}} 元</p>
        <p>金额：{{res}} 元</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const vm = new Vue({
            el: document.querySelector(".app"),
            data() {
                return {
                    num: 0,
                    price: 50,
                    res: 0,
                    max: 100,
                };
            },
            // 侦听器属性
            watch: {
                // 侦听的是某一个属性的值得变化，它的属性名与data中要监听的属性同名
                num(newValut, oldValue) {
                    this.res = newValut * this.price;
                    // 监听库存
                    if (newValut >= 20) {
                        this.max = newValut;
                        alert('库存不足，请补货');
                    }
                }
            }
        })
    </script>

计算属性与侦听器之间的区别：
计算属性：最终要和data合并，所以不要和data的属性重名，适合用于数据之间存在依赖计算的场景。
侦听器属性：侦听某一个属性的变化，它的属性名必须和data中的属性同名，适合用于根据监听数据变化来处理的场景。