vue实现计数器简单制作

本文实例为大家分享了vue实现计数器简单实现代码，供大家参考，具体内容如下

过程注意事项

  • 创建vue实例时：el（挂载点）data（数据）methods（方法）。
  • v-on指令得作用是绑定事件，简写为@。
  • 方法中通过this关键字获取data中的数据。
  • v-text指令的作用是：设置元素的文本值，简写为{{}}。
  • v-html指令的作用是：设置元素的innerHTML。

实际代码与截图

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计数器</title>
</head>
<body>
    <div id="app">
        <!--计数器功能区域-->
        <div class="input-num">
            <button @click="sub">
                -
            </button>
            <span>{{num}}</span>
            <button @click="add">
                +
            </button>
        </div>
    </div>
        <!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    //vue实例
    var app = new Vue({
        el:"#app",
       data: {
            num:1
       },
       methods: {
           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>

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 从零撸一个pc端vue的ui组件库( 计数器组件 )

    听到计数器这个名字很多人是不是一瞬间没有什么印象, 毕竟这个组件用的比较少,就是那种左边一个'-'右边一个'+', 控制某些数量的时候才会用到, 比如我之前做的商城小程序只有'下单'页面的规格弹出框里面才有他的身影, 如果是涉及到处理商品数量很频繁的业务场景应该会很常见吧, 但是不要看这个组件小, 编写它的时候坑还不少, 本次我们就来做一个计数器, 目标就是尽可能小, 尽可能的省性能. 1:需求分析 每次+1 -1是常态, 但是如果搞活动, 每次最少为+-2个或三个, 就要兼容一下了,( 举一个

  • vuex实现简易计数器

    vuex实现简易计数器

    本文实例为大家分享了vue.js计数器的制作方法,供大家参考,具体内容如下 src/components Hello.vue <template> <div class="hello"> <h1>Now count is {{counterValue}}</h1> <br> </div> </template> <script> import { getCount } from '../vu

  • Vuex实现计数器以及列表展示效果

    本篇教程将以计数器及列表展示两个例子来讲解Vuex的简单用法. 本案例github 从安装到启动初始页面的过程都直接跳过.注意安装时选择需要路由. 首先,src目录下新建store目录及相应文件,结构如下: index.js文件内容: import Vue from "vue" import Vuex from 'vuex' Vue.use(Vuex); //务必在new Vuex.Store之前use一下 export default new Vuex.Store({ state:{

  • Vuex 使用及简单实例(计数器)

    Vuex 使用及简单实例(计数器)

    前一段时间因为需要使用vue,特地去学习了一下.但是时间匆忙vuex没有接触到,今天闲暇时看了解了一下vuex,并做了一个小demo,用于记录vuex的简单使用过程. 什么是Vuex? vuex是专门为vue.js应用程序开发的一种状态管理模式,当多个视图依赖于同一个状态或是多个视图均可更改某个状态时,将共享状态提取出来,全局管理. 引入Vuex(前提是已经用Vue脚手架工具构建好项目) 1.利用npm包管理工具,进行安装 vuex.在控制命令行中输入下边的命令就可以了. npm install

  • vue实现计数器简单制作

    vue实现计数器简单制作

    本文实例为大家分享了vue实现计数器简单实现代码,供大家参考,具体内容如下 过程注意事项 创建vue实例时:el(挂载点)data(数据)methods(方法). v-on指令得作用是绑定事件,简写为@. 方法中通过this关键字获取data中的数据. v-text指令的作用是:设置元素的文本值,简写为{{}}. v-html指令的作用是:设置元素的innerHTML. 实际代码与截图 <html lang="en"> <head> <meta chars

  • 使用Vue完成一个简单的todolist的方法

    使用Vue完成一个简单的todolist的方法

    看了两天的Vue,还是上手写一个简单的todolist更实用(文末有彩蛋). 一.使用vue-cli脚手架快速搭建一个框架 利用vue-cli来自动生成我们项目的前端目录及文件,方法: npm install -g vue-cli vue init webpack my-project cd my-project npm install npm run dev 这样我们的一个基于webpack的vue项目目录就可以快速构建好了. 目录如下: 二.完成一个简单的todolist 接下来就看一下we

  • vue.js实现简单计时器功能

    vue.js实现简单计时器功能

    本文实例为大家分享了vue.js实现简单计时器功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <title>抬腿计数器</title> <script src="/static/vue/vue.js"></script> <script src="/static/vue/index.js&quo

  • js正则实现的密码框简单制作,还可以替换成自己想用得符号

    密码框简单制作,还可以替换成自己想用得符号. <style type="text/css"> #c { position: relative; } #a { position: absolute; left: 0; top: 0; font-size: 12px; font-family: 宋体; } #b { position: absolute; left: 0; top: 0; font-size: 12px; font-family: 宋体; -moz-opacit

  • Java线程安全的计数器简单实现代码示例

    前几天工作中一段业务代码需要一个变量每天从1开始递增.为此自己简单的封装了一个线程安全的计数器,可以让一个变量每天从1开始递增.当然了,如果项目在运行中发生重启,即便日期还是当天,还是会从1开始重新计数.所以把计数器的值存储在数据库中会更靠谱,不过这不影响这段代码的价值,现在贴出来,供有需要的人参考. package com.hikvision.cms.rvs.common.util; import java.text.SimpleDateFormat; import java.util.Arr

  • javascript实现二级级联菜单的简单制作

    javascript实现二级级联菜单的简单制作

    本文实例讲述了javascript实现二级级联菜单的简单制作方法.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> <meta http-equiv="pragma" content="

  • Vue+Flask实现简单的登录验证跳转的示例代码

    Vue+Flask实现简单的登录验证跳转的示例代码

    本文介绍了Vue+Flask实现简单的登录验证跳转,分享给大家,具体如下: 文件位置: login.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Login</title> <script type="text/javascript" src="../sta

  • vue init失败简单解决方法(终极版)

    //由于windows系统的某方面问题,vue脚手架安装可能会出现第一证书丢失 // 报错:vue-cli · Failed to download repo vuejs-templates/webpack-simple: unable to verify the first certificate //简单一点,你也可以直接去github下载对应的模板(template), 然后windows+r,cmd, vue init webpack-simple project --offline /

  • Vue波纹按钮组件制作

    先说一下用法: <zk-button class="btn btn-default">默认按钮</zk-button> <zk-button class="btn btn-default btn-round">默认按钮</zk-button> <zk-button class="btn btn-default btn-round" :speed="4" :opacity=&

  • 使用vue + less 实现简单换肤功能的示例

    做的换肤效果比较简单,只是顶部导航背景色的改变.下面是效果图. 首先,先说一下我最初的思路. 我最初的想法是使用less定义变量,然后通过js来切换变量,通过切换的变量来达到换肤的效果. 我先新建了一个 theme.less文件,代码如下: @theme:@themea; @themea:pink; @themeb:blue; @themec:gray; 如我最开始的想法,应该是通过点击事件来改变变量 @theme 的值. 我用了element-ui这个框架,所以我的下拉菜单的代码也不复杂: <

随机推荐