题目
用vue实现计数器功能，其中vue实现的代码由黑马程序员vue教程给出，这里对其CSS代码进行了注释，并且用原生JS重新实现了一次。
效果
不能大于10
不能小于0
vue实现
实现步骤
1.确定el挂载点(id = "app"的div)
2.data中定义数据(num,min,max)
3.methods添加两个方法sub(-)和add(+)
4.使用v-text将num设置给span标签
5.使用v-on分别将sub和add绑定给-和+
6.设置num的范围，即min = 0,max=10
<html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>计数器title> <link rel="stylesheet" href="./css/index.css"> head> <body> <div id="app"> <div class="input-num"> <button @click="sub"> - button> <span>{{ num }}span> <button @click="add"> + button> div> <img src="http://www.itheima.com/images/logo.png" alt="" /> div> body>html><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script><script> // 创建Vue实例 var app = new Vue({ el: "#app", data: { num: 1, min: 0, max: 10 }, methods: { sub() { if (this.num > this.min) { this.num--; } else { alert("不能小于0"); } }, add() { if (this.num < this.max) { this.num++; } else { alert("不能大于10"); } } } });script>原生JS实现
实现步骤
1.设定数据范围
var max = 10; var min = 0;2.找出要操作的对象
var button_all = document.querySelectorAll("button"); var span_c = document.querySelector("span"); var button_mul = button_all[0]; var button_add = button_all[1];3.为两个按钮绑定事件，并使用innerText更新span里面的内容
button_mul.onclick = function(){ if(parseInt(span_c.innerText)>0){ console.log("点我了") span_c.innerText = span_c.innerText - 1 }else{ alert("不能小于0"); } } button_add.onclick = function(){ if(parseInt(span_c.innerText)<10){ console.log("点我了+") span_c.innerText = parseInt(span_c.innerText)+1 }else{ alert("不能大于10"); } }完整代码
<html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>计数器title> <link rel="stylesheet" href="./css/index.css" />head><body> <div id="app"> <div class="input-num"> <button > - button> <span>0span> <button > + button> div> <img src="http://www.itheima.com/images/logo.png" alt="" /> div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script> <script> var max = 10; var min = 0; var button_all = document.querySelectorAll("button"); var span_c = document.querySelector("span"); var button_mul = button_all[0]; var button_add = button_all[1]; button_mul.onclick = function(){ if(parseInt(span_c.innerText)>0){ console.log("点我了") span_c.innerText = span_c.innerText - 1 }else{ alert("不能小于0"); } } button_add.onclick = function(){ if(parseInt(span_c.innerText)<10){ console.log("点我了+") span_c.innerText = parseInt(span_c.innerText)+1 }else{ alert("不能大于10"); } }script>body>html>CSS代码解释
在button和span中不同位置使用flex: 1会有不用效果，在button中使用,button会改变自己的宽度，来和span一起占满父元素div的空间，效果如下
而在span中使用，button的宽高不会变化,span的宽高会变化
body{ background-color: #f5f5f5; /* background-color: yellow; */}#app { /* background-color: black; */ width: 480px; height: 80px; margin: 200px auto;}.input-num { margin-top:20px; height: 100%; display: flex; border-radius: 10px; /*让边角变圆*/ overflow: hidden; /*overflow 属性规定当内容溢出元素框时发生的事情。*/ box-shadow: 4px 4px 4px #adadad;/*阴影*/ border: 1px solid #c7c7c7;/*宽度 样式(视线)颜色*/ background-color: #c7c7c7;/*背景颜色*/}.input-num button{ /* flex: 1; */ width: 150px; height: 100%; font-size: 40px; color: #ad2a27; cursor: pointer; border: none; outline: none; background-color:rgba(0, 0, 0, 0); /* background-color: yellow; */}.input-num span { /* width: 164px; */ height: 100%; font-size: 40px; /* display: block; */ flex: 1; text-align: center; line-height: 80px; font-family:auto; /* background-color: red; */ background-color: white;}img{ float: right; margin-top: 50px; /* background-color: yellow; */}CSDN链接：
https://blog.csdn.net/qq_44742090/article/details/109537886
2312
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
