【Vue】 Vue 计算属性和侦听器属性与实战 - PHP前端

Home > List of blog posts > 【Vue】 Vue 计算属性和侦听器属性与实战

Blogger Information

Blog 94

fans 0

comment 0

visits 92680

Special Recommendation

More>

Related recommendations

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>

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

【HTML】文档结构与元素，标签，属性的类型

2022-11-27 20:51:59

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

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

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

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

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