【Vue】 Vue 计算属性和侦听器属性与实战

Vue 计算属性和侦听器属性与实战

1. Vue 计算属性和侦听器属性

Vue实例计算属性 computed:
Vue 侦听器属性 watch:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算属性和侦听器属性：本质上就是方法</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        input {
            width: 5em;
        }
    </style>
</head>
<body>
    <div id="app">
        <p>2数求和</p>
        <input type="number" v-model="a">+
        <input type="number" v-model="b">=
        <!-- 表达式 -->
        <!-- <span>{{a + b}}</span> -->
        <!-- 函数 -->
        <!-- <span>{{ add()}}</span> -->
        <!-- 计算属性（访问器） -->
        <span>{{ sum }}</span>
    </div>
    <script>
        Vue.createApp({
            data() {
                return {
                    //Vue中需要一个初始值
                    a : 0,
                    b : 0,
                };
            },
            methods: {
                // add (){
                //     return this.a + this.b;
                // },
            },
            //计算属性（与函数区别：可以缓存结果）
            computed:{
                sum(){
                    return this.a + this.b;
                }
            },
            //侦听器
            watch:{
                sum(curr,prev){
                    //curr:当前值（新），prev:原值（旧）
                    console.log(curr,prev);
                    if(curr >= 20){
                        alert('恭喜，您中奖了！')
                    }
                }
            }
        }).mount('#app');
    </script>
</body>
</html>

2. Vue 实战1：购物车实自动计算（计算属性与侦听器属性）

总结：Vue实例：数据/方法/钩子函数/计算属性/侦听器综合应用实战

生命周期钩子函数 mounted()，实例挂载成功后执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实战1：购物车实自动计算</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        input {
            width: 5em;
        }
    </style>
</head>
<body>
    <div id="app">
        <h3>购物车计算</h3>
        <input type="number" v-model="num" min="1">
        <span> &times; </span>
        <span>{{price}}</span>
        <span> = </span>
        <!-- <span>{{ num * price}} 元</span> -->
        <!-- 计算属性 -->
        <span>{{ shouldPay }} 元</span>
        <p>优惠：<span>{{discount}} 元，实付：{{realPay}}</span></p>
    </div>
    <script>
        Vue.createApp({
            data() {
                return {
                    //数量
                    num: 5,
                    //单价
                    price: 150,
                    //优惠金额
                    discount: 0,
                    //实付
                    realPay: 0,
                    //折扣率
                    disRate: 1,
                };
            },
            //生命周期钩子函数
            //mounted，实例挂载成功后执行
            mounted() {
                // 默认：实付 = 应付
                this.realPay = this.shouldPay;
                // 优惠
                this.discount = this.shouldPay - this.realPay;
            },
            //计算属性（与函数区别：可以缓存结果）
            computed: {
                //应付金额
                shouldPay(){
                    return this.num * this.price;
                }
            },
            //侦听器
            watch: {
                //监听“应付金额”的变化，确定折扣比例和金额
                shouldPay(curr){
                    //curr:必须；prev:可选
                    // 1. 计算折扣率
                    switch(true){
                        // [2000,5000]:8折
                        // [>=5000]:8折
                        case curr >= 2000 && curr < 5000 : this.disRate = 0.8;
                        break;
                        case curr > 5000 :this.disRate = 0.5;
                    }
                    // 2.计算实付 = 应付 * 折扣率
                    this.realPay = this.shouldPay * this.disRate;
                    // 3.计算优惠金额 = 应付 - 实付
                    this.discount = this.shouldPay - this.realPay;
                }
            },
        }).mount('#app');
    </script>
</body>
</html>

3. Vue 实战2：智能搜索（关键字过滤）

array.filter(callback):数据过滤器应用实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实战2：智能搜索</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <input type="search" v-model="keywords" placeholder="请输入关键字">
        <ul>
            <li v-for="(lang,key) in matchlangs" :key="key">{{lang}}</li>
            <!-- 下面应该显示的是一个匹配了关键字的结果集：计算属性进行数据过滤 -->
        </ul>
    </div>
    <script>
        Vue.createApp({
            data() {
                return {
                    //关键字
                    keywords: '',
                    //数据模拟
                    langs: ['html', 'css', 'javascript', 'js', 'php', 'mysql'],
                };
            },
            //计算属性
            computed: {
                // 过滤结果
                matchlangs(){
                    // 1.判断用户是否输入了内容
                    if(this.keywords != ''){
                        // 2.对结果进行过滤
                        // array.filter(callback):返回true的元素数据
                        return this.langs.filter((lang) => {
                            // string.includes(str):查询子串，返回 true/false
                            return lang.includes(this.keywords);
                        });
                    }
                },
            },
        }).mount('#app');
    </script>
</body>
</html>

Vue 计算属性和侦听器属性与实战

1. Vue 计算属性 和 侦听器属性

2. Vue 实战1：购物车实自动计算（计算属性与侦听器属性）

3. Vue 实战2：智能搜索（关键字过滤）

相关文章

1. Vue 计算属性和侦听器属性