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"></script>
    <style type="text/css">
       #app{
          text-align: center;
          margin: 0 auto;
          line-height: 500px;
       }

       #app input{
           width: 50px;
           height: 40px;
           font-size: 20px;
           border-radius: 5px;
           outline: none;
           /* 自定义边框 */
           border: 1px solid transparent;
           background-color: blue;
           line-height: 30px;
           color: white;
       }
       #app span{
           padding: 20px 20px;
           border: 1px;
       }

    </style>
</head>
<body>
    <div id="app">
      <input type="button" value="-" @click="sub"/>
      <span>{{num}}</span>
      <input type="button" value="+" @click="add"/>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                num: 1
            },
            methods:{
                add: function(){
                   if(this.num<10){
                    this.num++;
                   }else{
                       alert("达到最大啦!");
                   }
                },

                sub: function(){
                    if(this.num>0){
                        this.num--;
                    }else{
                        alert("已经没有了!");
                    }

                }
            }
        })
    </script>
</body>
</html>
  • data中写需要用到的数据： num
  • -methods中添加两个方法：加(add)、减(sub)
  • 使用v-text或者差值表达式将num设置给span标签
  • 使用v-on：(简写，@)将add、sub分别绑定给+、-按钮
  • 累加的逻辑：小于10累加，否则提示
  • 递减的逻辑：大于0递渐，否则提示
  • 方法中通过this关键字获取data中的数据

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

赞 (0)

相关推荐

  • 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.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 使用及简单实例(计数器)

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

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

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

  • 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">

  • vue实现选项卡案例

    vue实现选项卡案例

    本文实例为大家分享了vue实现选项卡案例的具体代码,供大家参考,具体内容如下 实现步骤 实现静态UI效果 用传统的方式实现标签结构和样式 基于数据重构UI效果 将静态的结构和样式重构为基于Vue模板语法的形式 处理事件绑定和js控制逻辑 声明式编程 模板的结构和最终显示的效果基本一致 我们先把每组数据作为对象存储在数组中 list: [{       id: 1,       title: 'apple',       path: 'images/苹果.jpg'       }, {      

  • vue实现记事本案例

    vue实现记事本案例

    本文实例为大家分享了vue实现记事本案例的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name=&

  • Vue v-model实现案例介绍

    Vue v-model实现案例介绍

    目录 1. 概述 2. 使用方法 3. 案例 3.1 用户登录 3.2 todolist 3.3 实现单个复选框 3.4 实现多个复选框 3.5 实现复选框全选 3.6 单选和下拉 4. v-model修饰符 4.1 lazy 4.2 trim 4.3 number 5. 案例 5.1 购物车 5.2 购物车持久化 1. 概述 v-model 是 Vue 提供的一个语法糖,它是 value 值和事件的结合体,它会根据不同的表单项,来选择执行不同的事件.它的作用是,通过和表单元素绑定,实现双向数据

  • Vue路由守卫案例代码

    目录 Vue路由守卫 全局路由守卫 全局前置守卫 全局后置守卫 实例代码: 独享守卫 组件内守卫 总结 Vue路由守卫 路由守卫,简单理解来说就是,当用户要进行一些操作时,我需要用户的一些信息或数据或行为,我判断过后,才会同意用户进行操作,说到这里,我想大家心里都或多或少有点理解了吧,官方一点的解释就是进行操作的鉴权,当操作与之条件匹配时,操作成功,当操作与之不匹配时,操作终止,作用就是是对路由进行权限控制. 在Vue中,路由守卫分为三种:全局路由守卫.独享路由守卫以及组件内路由守卫 全局路由守

  • vue实现购物车案例

    本文实例为大家分享了vue实现购物车的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-

  • Vue之TodoList案例详解

    Vue之TodoList案例详解

    <template> <div id="root"> <div class="todo-container"> <div class="todo-wrap"> <Top :received="received" /> <List :todos="todos" :checkTodo="checkTodo" :deleteTo

  • Vue的模板语法以及实战案例

    Vue的模板语法以及实战案例

    目录 前言 一.双大括号表达式 二.插值 2.1文本 2.2 原始 HTML 2.3 特性 2.4 javascript 表达式 三.指令 3.1 参数 3.2 动态参数 3.3 修饰符 四.指令缩写 4.1 v-bind 4.2 v-on 总结 前言 相信模板语法大家多少都有所接触,例如百度模板引擎.ejs 等等.同样 Vue.js 也使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规

  • Vue h函数的使用详解

    Vue h函数的使用详解

    目录 一.认识 二.使用 1.h() 参数 2.简单的使用 3.实现一个计数器案例 4.函数组件和插槽的使用 三.jsx的使用 1.jsx的认识 2.下载Babel插件支持vue(现在貌似脚手架直接支持) 3.配置babel 4.简单的使用 5.计数器案例 6.组件和插槽的使用 一.认识 文档:https://v3.cn.vuejs.org/guide/render-function.html#dom-%E6%A0%91 ​ h() 到底会返回什么呢?其实不是一个实际的 DOM 元素.它更准确的

随机推荐