基于vue设计一个计数器

最新推荐文章于 2023-04-02 21:57:33 发布
最新推荐文章于 2023-04-02 21:57:33 发布
阅读量1.4k 收藏 1
点赞数
分类专栏： vue基础 文章标签： vue javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43573285/article/details/119349436
版权

基于vue设计一个计数器

文章目录


开发工具：HBuilder X(官网可下载）

1 首先根据设计要求，准备所需要的元素

在这里插入图片描述

2 然后针对元素的对应的操作，定义data，以及对应的方法

在这里插入图片描述

设计出大概的框架

3 将方法对应的数据操作细致的写道程序中，并且增加Button按钮执行的动作。

测试按钮是否关联对应的方法

add:function(){
						//首先测试按钮是否关联
						console.log("add")
					},
					sub:function(){
						console.log("sub")
					}

在这里插入图片描述

看到当点击的时候，对应输出了方法的调用add和sub

4 检测成功，然后完整实现对应的代码

计数器最小只能为0，小于0弹窗警告；最大值为10，大于10弹窗警告

完整代码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设计一个计数器</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<!-- <link rel="stylesheet" href="./css/index.css" /> -->
	</head>
	<body>
		<div id="app">
		<div class="input-num">
			<button @click="add()">+</button>
			<span>{{num}}</span>
			<button @click="sub()">-</button>
		</div>
		</div>
		<script>
			var app=new Vue({
				el:"#app",
				data:{
					num:1 //初始化的数值显示1，同时用于测试，放入span中
				},
				methods:{
					//根据计数器的功能，增加，减少分别定义函数add sub
					add:function(){
						//首先测试按钮是否关联
						//console.log("add")
						if(this.num<10)
						{
							this.num++;
						}else{
							alert("别点了，最大了！");
						}
					
					},
					sub:function(){
						//console.log("sub")
						if(this.num>0)
						{
							this.num--;
						}else{
							alert("别点了，最小了！");
						}
					}
				}
			})
		</script>
	</body>
</html>

至此，由两个按钮，和一个span设计的计数器完成

打怪进阶选手安好
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何利用Vue制作一个简单的计数器
weixin_50357864的博客
03-18 926
一、思路 1、首先设置一个文本作为计数器的说明； 2、在文本附近设置两个按钮作为计数时使用； 3、设置一个el挂载点为两个按钮设置函数，即将数字加一或减一； 4、为两个按钮绑定设置好的函数； 5、完成。 二、源码 <!DOVTYPE> <html> <head> <meta charset= "utf-8"> <title></title> </head> <body> <div id="
基于vue+百度地图的多车实时运动及轨迹追踪实现（上帝视角篇）
family2hu的博客
03-27 4092
本篇是基于vue+百度地图的多车实时运动及轨迹追踪实现——上帝视角篇，主要讲解了项目落地过程中的方案，里面有一些小点是以后直接借鉴的
Vue-使用render函数实现计数器组件
xzp_forever的博客
06-08 323
通过vue的render函数实现计数器： 涉及到以下几点： 1 vue创建组件语法 Vue.component('组件名'， { /* 定义 */}) 2 render函数 render(createElement) 3 createElement函数 createElement('类型'， {/*属性*/}， [/*子节点*/]) 具体参考vue官网：https://cn.vuejs.org 以下是简单代码实现： <!Doctype htm...
Java开发WebService实例--计数器
上善若水
04-25 154
  如果使用GOOGLE、BAIDU等搜索工具，搜索WebService的相关知识，可以查到N多的网页，我就是通过这些网页的学习，逐渐掌握了些WebService的相关知识。这里对那些无私奉献知识的人一并表示感谢。 网上关于WebService的例子，多是一些简单得不能再简单的hello world的例子，简单得以至于你对WebService没有什么感觉。有了WebService的基本知识...
【前端】vue简单示例-计数器
JsonCC的博客
03-09 346
点击加号或减号可进行数的增加和减小 将vuejs下载,下载网址 2. 下载好的文件展示: 复制粘贴到自己的web项目中 直接用 <script> 标签引入(此标签可放在.html的任意位置) 方法一: <body <div id="cout"> <h2>当前计数:{{counter}}</h2> <button v-on:click="counter++">+</button> <butt
vue列表显示和计数器（体验响应式）
407指导员
12-08 483
vue列表显示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue列表展示</title> </head> <body> <div id="app"> <ul> <li v-for="item in movies">{{item}}</l
从零撸一个pc端vue的ui组件库( 计数器组件 )
10-16
在开发前端项目时，尤其是基于Vue.js框架的PC端应用，打造一套UI组件库是一项十分有益的工作，可以极大提高开发效率，保证界面风格的统一性，和用户交互的一致性。本文将详细介绍如何从零开始撸一个简单的PC端Vue UI...
基于Vue的智慧停车场大数据平台(车辆大数据大屏)-源码
10-02
在本项目中，“基于Vue的智慧停车场大数据平台(车辆大数据大屏)”利用Vue.js构建了一个实时展示停车场数据的交互式大屏应用。这个应用的核心目标是通过大数据分析，为管理者提供停车场运营的全面视图，包括车辆进出...
BilibiliSubsCounter:基于Web的bilibili实时订户计数器
05-28
【BilibiliSubsCounter:基于Web的bilibili实时订户计数器】 BilibiliSubsCounter是一个专门针对Bilibili平台的在线订阅者计数工具，它利用Web技术实现实时更新UP主（用户上传者）的订阅数量。这个项目的主要目标是...
vue+animation实现翻页动画
10-15
在本文内容中，主要通过Vue.js结合CSS动画实现了一个数字计数器的翻页动画效果。这里使用了Vue.js的v-for指令来渲染一系列的数字，然后利用Vue的watch选项和setInterval定时器函数来控制数字的更新。当新数字到达时...
自己实现string的substring方法 人民币小写转大写，数字反转，正则优化
12-10
水平有限，不保证我的方案绝对正确，如有错误欢迎指出。 一、自己实现string的substring方法 方法一：用charAt取出截取部分 代码如下: String.prototype.mysubstring=function(beginIndex,endIndex){ var str=this, newArr=[]; if(!endIndex){ endIndex=str.length; } for(var i=beginIndex;i<endIndex;i++){ newArr.push(str.charAt(i)); } return newArr.join(“”); } //test
用Vue实现计数器
weixin_50357864的博客
03-14 990
如何用Vue实现一个计数器？ 源码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>本地应用-计数器</title> </head> <body> <!-- html结构 --> <div id="app"> <!--计数器功能区域--> <div class="i
Vue自定义InputNumber 计数器组件
weixin_43882265的博客
08-03 2134
因为原始的el-element的el-input-number组件有问题： 1. 原生组件能输入英文，不能限制只能输入数值； 2. 原始组件能通过键盘上的删除按钮，将数据全部删除，若提交表单的话，就会将一个空值提交给后端，这是错误的，所以前端还要给组件做非空校验，比较麻烦； 3. 原始组件必须要失焦才能触发数据更新，若我们在更改数值后，没有点击失焦，而是直接点击确认提交表单，此时我们以为我们已经将数值改变了，其实数值没有改变，数值还是改变之前的值，若此时刷新页面的话，就能看到数值没有更新，所以必须要在更改数
Vue实现简单——计数器
weixin_62128198的博客
11-16 1476
vue实现计数器
Vuex学习指南-实现一个计数器
qq_17831715的博客
03-18 643
VueX学习 使用vue-cli创建vue项目 # 全局安装脚手架 npm install -g @vue/cli-init # 初始化项目 vue init webpack-simple my-project # 安装vuex依赖 npm install vuex 修改main.js 我们需要引入vuex import Vuex from 'vuex' // 让Vuex生效 Vue.use(...
使用Vue三种方法实现简单计算器
最新发布
2201_75939414的博客
04-02 3510
4:Vue.js使用@click指令绑定一个点击事件，并调用pd()方法，根据用户输入的数字和操作符计算结果，并将结果保存到result变量中。使用v-model指令将result变量的值绑定到结果显示输入框中，从而实现实时更新结果。代码实现了一个简单的计算器，用户可以在输入框中输入两个数字，选择一个操作符，并点击“等于”按钮，Vue.js会根据用户的输入进行计算，并将结果显示在另一个输入框中。2:methods属性中定义了一个方法pd()，用于根据用户的输入计算结果，并将结果保存到result变量中。
Vue自定义组件父组件实现@click点击事件绑定的方法（实现计数器）
weixin_46816740的博客
09-11 3379
自定义组件的实现中，是实现一个计数器编程，原本是绑定在子元素上的@click事件，尝试绑定在自定义组件的父元素上进行实现。 原来的子元素绑定实现计数器代码如下： <body> <div id="app"> <briup-info>{{count}}</briup-info> </div> </body> Vue.component("briup-info",{ template:`
Vue小案例1：计数器
qq_42598899的博客
07-08 230
Vue小案例1：计数器 html页面： 准备两个按钮分别绑定两个事件对应加减add，sub；还有一个span容器放置数据，样式自己写没有太大要求 <div id="app"> <div class="input-num"> <button type="button" @click="sub">-</button> <span>{{num}}</span> <button type="button" @
vue通过点击事件弹出弹窗页面
热门推荐
David_house的博客
04-09 6万+
步骤一 创建一个弹窗页面，我们给该页面命名为dialogComponent，弹窗页面中要设置以下内容： <template> <!--1.首先，弹窗页面中要有el-dialog组件即弹窗组件，我们把弹窗中的内容放在el-dialog组件中--> <!--2.设置:visible.sync属性，动态绑定一个布尔值，通过这个属性来控制弹窗是否弹出--> <el-dialog title="弹窗" :visible.sync="detailVisible" width
基于springboot+vue的库存管理系统
03-14
Vue.js 是一个流行的前端框架，它可以帮助开发者构建交互式的用户界面。如果你想要开发一个库存管理系统，可以考虑使用 Spring Boot 和 Vue.js 进行开发。你可以使用 Spring Boot 来构建后端 API，使用 Vue.js 来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值