第24章 0118-vue常用指令介绍，学习心得、笔记（实例演示条件渲染， 计算属性和侦听器，并比较计算属性与侦听器之间的区别）

今天所学心得、笔记

1、条件渲染

<div class="app">
    <p>您的充值金额是：{{money}}</p>
    <!-- v-if,  v-else-if多分支 -->
<!--    <p v-if="money > 1000">{{grade[0]}}</p>-->
    <p v-if="money >= 1000 && money < 2000">{{grade[0]}}</p>
    <p v-else-if="money >= 2001 && money < 3000">{{grade[1]}}</p>
    <p v-else-if="money >= 3001 && money < 4000">{{grade[2]}}</p>
    <p v-else-if="money >= 4001 && money < 5000">{{grade[3]}}</p>
    <p v-else-if="money > 5000">{{grade[4]}}</p>
    <p v-else>{{grade[5]}}</p>
    <button
            @click="status = !status"
            v-text="status ? `月初发工资了...` : `月底又没钱了...`"
    ></button>
    <!-- v-show: -->
    <p v-show="status">{{msg}}</p>
</div>
<script src="vue.js"></script>
<script>
    const vm = new Vue({
        el: '.app',
        data() {
            return {
                tips: "月初发工资了...",
                money: 5001,
                msg: "明天请大家吃饭...",
                status: true,
                grade: [
                    "普通会员",
                    "超级会员",
                    "白金会员",
                    "终身会员",
                    "王者会员",
                    "您还不是会员，请充值...",
                ],
            }
        }
    })
</script>

---

2、计算属性

<div class="app">
    <p>商品数量：<input v-model.lazy="num" type="text"></p>
    <p>商品价格：{{price}}</p>
    <hr>
    <p>您输入的商品数量是：{{num}}</p>
    <p>商品价格是：{{price}}</p>
    <p>商品总价是：{{amount}}</p>
</div>
<script src="vue.js"></script>
<script>
    const vm = new Vue({
        el: '.app',
        data() {
            return {
                price: 100,
                num: 0,
            }
        },
        computed: {
            // 计算属性，第 1 种写法, 只有get()方法------------------
            // amount() {
            //     return this.price * this.num
            // }
            // 计算属性，第 2 种写法, 可以有get(), set()两个方法-----
            amount: {
                get() {
                    return this.price * this.num;
                },
                set(value) {
                    console.log(value);
                    //模拟给商品打6折
                    if(value > 1000) this.price=60;
                }
            }
        }
    });
    vm.amount = 99999;
</script>

---

3、侦听器

<div class="app">
    <p>商品数量：<input v-model="num" type="number" min="0" max="100" style="width: 3rem"></p>
    <p>商品价格：{{price}}</p>
    <hr>
    <p>您输入的商品数量是：{{num}}</p>
    <p>商品价格是：{{price}}</p>
    <p>商品总价是：{{res}}</p>
</div>
<script src="vue.js"></script>
<script>
    const vm = new Vue({
        el: '.app',
        data() {
            return {
                price: 100,
                num: 0,
                res: 0,
            }
        },
        watch: {
            // 侦听的是某一个属性的值的变化,它的属性名与data中要监听的属性同名;
            //这里侦听的是data 中，num 值的变化
            num(newVal, oldVal) {
                console.log("老值是：" + oldVal + " ---" + " 新值是：" + newVal);
                // this.res = this.num * this.price;
                this.res = newVal * this.price;
                if(newVal >= 20) {
                    document.querySelector("input").max = newVal;
                    alert("库存不足，请补货......")
                }
            }
        },
    })
</script>