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

来源：互联网发布：sql创建主键语句编辑：程序博客网时间：2024/06/08 01:09

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>

写的样式跟设计图不一致，因为只是一个简单的demo所以没有写的很详细！俩边按钮有俩张背景图片，赋值代码后直接添加一个背景颜色即可。

里面写了一个全局的watch Api 跟局部差不多就是结构有点不一样而已！

好~ 我是杨小宝！做这个项目中有任何的vue知识点我都会一一写在博客。让我们继续努力学习加油吧！

阅读全文

0 0