双重监听俩个值的变化 vue2.0 -- 飞机票项目

最新推荐文章于 2024-10-16 16:30:51 发布

Facing_the_Giants

最新推荐文章于 2024-10-16 16:30:51 发布

阅读量786

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端

本文链接：https://blog.youkuaiyun.com/Facing_the_Giants/article/details/78509737

web前端专栏收录该内容

21 篇文章

订阅专栏

今天给写自己吧！或者说做一个笔记！就是双重监听俩个值的变化。到底是什么呢？先看截图

这里写图片描述

需求：

    1.点击成人 + 号 最多添加到 9 
    2.点击成人 - 号 最少 为 1 
    3.点击儿童 + 号  最多添加到 9
    4.点击儿童 - 号 最少为 0
    5.1个成人数量最多带俩个儿童

知识：

    1.监听
    2.双重判断

难点：

    1.我个人觉得判断确实是一个想法，跟思路。我做了大概1小时写出来的，但是我写第二遍的时候我就怎么写也写不出来了。
    2.双重判断 第5条

分析：

<script type="text/javascript" src="vue.js"></script>
// 一步步分析解释：
// 1. 首先 先把前四条写出来
<div id="box">
    <div>
        <span>成人：</span>
        <span @click='ManAdd' :class='{active:ManAddActive}'>+</span>
        <span>{{ManNum}}</span>
        <span @click='ManDelete' :class='{active:ManDeleteActive}'>-</span>
    </div>  
    <div>
        <span>儿童：</span>
        <span @click='ChildAdd' :class='{active:ChildAddActive}'>+</span>
        <span>{{ChildNum}}</span>
        <span @click='ChildDelete' :class='{active:ChildDeleteActive}'>-</span>
    </div>
</div>
// 2. 分析  成人 加 事件  ManAdd  成人 减 事件 ManDelete  值的变化 ManNum
<script type="text/javascript">
    new Vue({
        el:'#box',
        data:{
            ManNum:1,
            ManAddActive:true,
            ManDeleteActive:false
        },
        methods:{
            ManAdd(){
                if(this.ManAddActive){
                    this.ManNum += 1;
                    if(this.ManNum > 1 && this.ManNum < 9){
                        this.ManDeleteActive = true;
                    }else{
                        this.ManAddActive = false;
                    }   
                }
            },
            ManDelete(){
                if(this.ManDeleteActive){
                    if(this.ManNum < 2){
                        this.ManDeleteActive = false;
                    }else{
                        this.ManNum -= 1;
                    }
                }
            }
        }，
        watch:{
            ManNum(newVal){
                if(newVal == 1){
                    this.ManDeleteActive = false;
                }
            }
        }
    })
    // 当写到现在的时候 我发现一个问题 就是 当减到 1 的时候 减号背景色不会改变。这时候我们需要监听去写去判断。
    // 当然 儿童也是这么去写 同样的去监听。但是看到第5条我需要改变里面很多的值。
    // 我把所有的 解释写到 demo 中 
</script>

Deom ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="vue.js"></script>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        span{
            display: inline-block;
            width: 60px;
            height: 20px;
            border: 1px solid #000;
            margin-right:  10px;
            background: #c8c8c8;
            text-align: center;
            color: yellow;
        }
        div{
            margin-bottom: 20px;
        }
        span.active{
            background: red;
        }
    </style>
</head>
<body>
    <div id="box">
        <div>
            <span>成人：</span>
            <span @click='ManAdd' :class='{active:ManAddActive}'>+</span>
            <span>{{ManNum}}</span>
            <span @click='ManDelete' :class='{active:ManDeleteActive}'>-</span>
        </div>  
        <div>
            <span>儿童：</span>
            <span @click='ChildAdd' :class='{active:ChildAddActive}'>+</span>
            <span>{{ChildNum}}</span>
            <span @click='ChildDelete' :class='{active:ChildDeleteActive}'>-</span>
        </div>
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el:'#box',
        data:{
            // 成人
            ManNum:1,
            ChildNum:0,
            ManAddActive:true,
            ManDeleteActive:false,
            // 儿童
            ChildAddActive:true,
            ChildDeleteActive:false,
        },
        methods:{
            ManAdd(){
                // 首先 判断 成人 +号 背景色是否有，如果有 执行  ManNum += 1，
                // 进行判断 ManNum的值 在 1 ~ 9 之间 并且 ChildNum 的值 要小于 ManNum值的俩倍，如果OK的话 就让 成人 -号 添加背景颜色，并且要孩子 +号添加背景颜色  反之 让 成人 + 号 删除背景色   
                if (this.ManAddActive) {
                    this.ManNum += 1;
                    if (this.ManNum > 1 && this.ManNum < 9 && this.ChildNum < this.ManNum * 2) {
                        this.ManDeleteActive = true;
                        this.ChildAddActive = true;
                    }else{
                        this.ManAddActive = false;
                    }

                }else{
                    return;
                }
            },
            // 首先判断 成人 - 号 背景色  如果有 执行 判断
            // ManNum 值 小于 2 的时候 让 成人 - 号 删除背景色 反之 让 ManNum -= 1 ;但是需要 再次判断 减的时候 ChildNum 要小于 ManNum值的俩倍  如OK 让孩子 +号 添加背景色 反之 孩子 + 号 删除背景色 并且让  ChildNum值 等于 ManNum值的俩倍 
            // 这里的判断 也可以 写在 孩子 - 号里面 写一遍 即可 剩下的判断条件在  watch里面 写 即可。
            ManDelete(){
                if (this.ManDeleteActive) {
                    if (this.ManNum < 2) {
                        this.ManDeleteActive = false;
                    }else{
                        this.ManNum -= 1;
                        if (this.ChildNum < this.ManNum * 2) {
                            this.ChildAddActive = true;
                        }else{
                            this.ChildAddActive = false;
                            this.ChildNum = this.ManNum * 2;
                        }
                        this.ManAddActive = true;
                    }
                }else{
                    return;
                }
            },
            ChildAdd(){
                if (this.ChildAddActive) {
                    this.ChildNum += 1;
                    if (this.ChildNum > 0 && this.ChildNum < 9 && this.ChildNum < this.ManNum * 2) {
                        this.ChildAddActive = true;
                    }else{
                        this.ChildAddActive = false;
                    }
                }else{
                    return;
                }
            },
            ChildDelete(){
                if (this.ChildDeleteActive) {
                    if (this.ChildNum < 1 ) {
                        this.ChildDeleteActive = false;
                    }else{
                        this.ChildAddActive = true;
                        this.ChildNum -= 1;
                        this.ManAddActive  = true;
                    }
                }else{
                    return;
                }
            }
        },
        watch:{
            ManNum(newVal){
                // 首先判断 ManNum 值 等于 1的时候  让 成人 - 号 删除背景色 这个也在分析中 解释过  再次判断  俩个值 相加 等于 9 的时候 让 成人 + 号 删除背景色  孩子 + 号 删除背景色  孩子 - 号 添加背景色
                if (newVal == 1 ) {
                    this.ManDeleteActive = false;
                }else if (newVal + this.ChildNum == 9) {
                    this.ManAddActive = false;
                    this.ChildAddActive = false;
                    this.ManDeleteActive = true;
                }
            },
            // 跟上面一样 只是一点 不同 
            ChildNum(newVal){
                if (newVal == 0) {
                    this.ChildDeleteActive = false;
                }else if (newVal + this.ManNum == 9) {
                    this.ManAddActive = false;
                    this.ChildAddActive = false;
                    this.ChildDeleteActive = true;
                }
            }
        }

    })

</script>
</html>

总结：

    1.这个案例说难也不难，说简单也不简单。最重要的是一个想法，一个思路问题。俩重的判断条件。
    2.如果大家有更合适的，更简单的代码 可以私聊我。QQ 992262716
    3.直接粘贴代码即可使用（引入vue.js）

大家好！通过这个监听Demo吧，感觉自己太差，还需要更加努力。
我是杨小宝，谢谢大家的阅读！感谢支持。