题目
用vue实现计数器功能，其中vue实现的代码黑马程序员vue教程给出，这里对其CSS代码进行了注释，并且用原生JS重新实现了一次。
效果
不能大于10
不能小于0
vue实现
实现步骤
- 确定el挂载点（id = "app"的div）
- data中定义数据（num,min,max）
- methods添加两个方法sub(-)和add(+)
- 使用v-text将num设置给span标签
- 使用v-on分别将sub和add绑定给-和+
- 设置num的范围，即min = 0,max=10
<!DOCTYPE html>
<html lang="en">
<head>
<!--博客原生vue-->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--https://blog.csdn.net/yiyueqinghui/article/details/86606929?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.compare&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.compare-->
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<!--https://blog.csdn.net/tangdou5682/article/details/77836061?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.compare&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.compare-->
<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>
<!--在CSS不设置宽度的情况下{
{ num }}会占宽度-->
<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");
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<!--博客原生JS-->
<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>
<!-- html结构 -->
<div id="app">
<!-- 计数器功能区域 -->
<div class="input-num">
<button >
-
</button>
<span>0</span>
<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; */
}