商城项目--产品的加减中的watch监听

最新推荐文章于 2023-01-20 14:21:38 发布

Facing_the_Giants

最新推荐文章于 2023-01-20 14:21:38 发布

阅读量359

点赞数

分类专栏： web前端文章标签：商城

本文链接：https://blog.csdn.net/Facing_the_Giants/article/details/77993021

版权

web前端专栏收录该内容

21 篇文章 0 订阅

订阅专栏

Hello 我是杨小宝！上一个复选框的demo写完后，我觉得还是写一下全局的watch监听吧！又不能重复写复选框，所有这里写了一个非常简单的加减的判断！

看一下项目图：
这里写图片描述

就做一下数量的加减判断即可！

简单说一下项目需求：
1.当点 + 号时左侧 - 号改变颜色
2.当点击 - 号中间num值为1 时不能点击或者说在点击也还是显示1.

因为很简单！直接上代码：

<!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;
        }
        /*大盒子的样式*/
        .add{
            width: 124px;
            height: 30px;
            border: 1px solid #d4d4d4;
            border-radius: 3px;
        }
        span{
            display: block;
            width: 30px;
            height: 30px;
        }
        input{
            outline:none;
        }
        /*加减按钮一边一个*/
        .addleft{
            float: left;
        }
        .addright{
            float: right;
        }
        /*加减按钮的样式*/
        .baojia_btn{
            width: 30px;
            height: 30px;
            border: 0;
            cursor: pointer;
        }
        /*中间按钮的样式*/
        .btn_text{
            float: left;
            width: 62px;
            height: 30px;
            border: 0;
            text-align: center;
            font-size: 14px;
            color: #666;
        }
        /*加减按钮图片*/
        .baojia_btn_left{
            background: #dedede url(icon_img26.png) no-repeat;
        }
        .baojia_btn_right{
            background:#dedede url(icon_img27.png) no-repeat;
        }
        .active{
            background:red;
        }


    </style>
</head>
<body>

    <div class="add">
        <span class="addleft"><input type="button" class="baojia_btn baojia_btn_left" @click='minus()' :class='{active:color}'></input></span>
        <input type="text"  v-model='num' class="btn_text"></input>
        <span class="addright"><input type="button" class="baojia_btn baojia_btn_right" @click='add()' :class='active'></input></span>
    </div>

</body>
</html>
<script type="text/javascript">
    var vm = new Vue({
        el:'.add',
        data:{
            num:1,
            active:'active',
            color:false,
        },
        methods:{
            minus(){
                if (this.num < 2 ) {
                    this.color = false
                    this.num = 1;
                }else{
                    this.num -= 1;

                }
                console.log(this.color)
            },
            add(){
                this.num += 1;
                if (this.num>1) {
                    this.color = true;
                }
                console.log(this.color)
            }
        }

    })

    vm.$watch('num',function (newVal) {
        if (newVal==1) {
            this.color = false
        }
    })
</script>