Vue 计数器的实现

目录
  • 1、计数器的实现
  • 2、实现效果

1、计数器的实现

在页面上简单实现一个计数器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
  <h3>当前计数器:{{counter}}</h3>
  <button @click="add">+</button>
  <button @click="minutes">-</button>
</div>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      counter: 0
    },
    methods: {
      add: function () {
        this.counter++;
      },
      minutes: function () {
        this.counter--;
      }
    }
  })
</script>
</body>
</html>

2、实现效果

最后实现的效果，看下面的gif图：

到此这篇关于Vue 计数器的实现的文章就介绍到这了,更多相关Vue 计数器内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue实现计数器案例

    Vue实现计数器案例

    本文实例为大家分享了Vue实现计数器展示的具体代码,供大家参考,具体内容如下 效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计数器</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">

  • 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

  • vue实现计数器简单制作

    vue实现计数器简单制作

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

  • 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:{

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

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

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

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

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

  • Vue 计数器的实现

    目录 1.计数器的实现 2.实现效果 1.计数器的实现 在页面上简单实现一个计数器: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/vue.js"></script> </head>

  • Vue中UI组件库之Vuex与虚拟服务器初识

    一.日历组件 new Date()的月份是从0开始的. 下面表达式是:2018年6月1日 new Date(2018, 5, 1); 下面表达式是:2018年5月1日 new Date(2018, 4, 1); 或 new Date(2018, 5-1, 1); 下面表达式是:2018年5月31日(得到上个月的最后一天) new Date(2018, 5 , 0); 日的参数可以是0,也可以是负数,表示上个月底的那一天. 下面表达式是:2018年7月01日 new Date(2018, 5, 3

  • vue3.0生命周期的示例代码

    在组件化的框架中,比如Angular.React或Vue,都为组件定义了生命周期这个概念,每个组件实例在被创建时都要经过一系列的初始化过程,例如:需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时,在这个过程中也会运行一些叫做生命周期钩子的函数,它们提供给用户在组件的不同阶段添加自己的代码的机会. 使用过Vue2.x的朋友肯定对它的生命周期钩子很熟悉了,因为在实际的开发过程中我们多多少少会用到他们,比如 created.mounted.destoryed等等.

  • 详解vue.js组件化开发实践

    详解vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然成为了第一个问题.鉴于目前web前端mvvm框架以及组件化开发方式的流行,决定技术栈采用:vue + es6 + 组件化. 这里首先简单说下web前端组件化开发方式的历程: 最早的组件化结构,代码结构可能如下: - lib/components/calendar |- calendar.css |-

  • Vue组件开发之LeanCloud带图形校验码的短信发送功能

    Vue组件开发之LeanCloud带图形校验码的短信发送功能

    有15万开发者使用LeanCloud服务,其中不乏知乎.懂球帝.爱范儿.拉卡拉等知名应用,LeanCloud提供了数据存储.即时消息--等一站式服务,并从常用的用户管理需求出发,提供了邮箱验证.短信验证--等用户账户相关的服务. 为防止攻击者恶意发送海量短信造成用户账户损失并影响正常业务,LeanCloud推出了免费图形校验码服务,并且可以在应用设置中设置"强制短信验证服务使用图形校验码". Vue是目前使用较广泛的三大前端框架之一,其数据驱动及组件化的特性使得前端开发更为快捷便利.

随机推荐