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" @click="add">+</button></div></div>

页面效果：

js部分：
其中num设置默认数据1
在方法中用this关键字访问num

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">window.onload=function(){var app=new Vue({el:'#app',data:{num:1},methods:{add:function(){if(this.num=10){alert("已经到了最大值")}else{this.num++}},sub:function(){if(this.num==0){alert("这是最小了")}else{this.num--}}}})}</script>

运行效果：
当数字达到10时

当值达到最小0时：

Vue小案例1：计数器相关推荐

vue小案例（小黑记事本和购物车）
vue小案例小黑记事本小案例 <footer class="footer" ><span class="todo-count" v-if=& ...
分析初识vue小案例
前言我们已经写好了一个案例:初识vue小案例接下来我们就分析初识vue小案例容器和vue实例是一一对应的! 容器和vue实例应该是一一对应的,不允许出现一对一或者一对多下面是一个一个容器对多个 ...
Vue小案例——图书列表
图书列表案例显示 HTML 结构 CSS 样式提供的静态数据把提供好的数据渲染到页面上对页面进行事件绑定逻辑层次的JS代码案例显示图书列表实现静态列表效果基于数据实现模板效果处里每 ...
Vue(小案例_vue+axios仿手机app)_实现用户评论
一.前言 1.渲染评论列表 2.点击加载按钮,加载更多 3.提交评论二.主要内容 1.评论列表一般是注册到一个全局的公共组件中 2.请求后台数据,渲染评论列表 (1)数据格式如下地址 /ap ...
Vue小案例之商品管理------创建页面与部分数据
logo的路径: 页面的初始布局: 初始的HTML: <div id="container"><div class= ...
Vue小案例之商品管理------添加商品
进行添加button,以及商品列表的创建 html: <div class="form-btn"><button>确认添加</button>&l ...
Vue小案例-小黑记事本的实现
小黑记事本综合应用了前面学习的集中指令,并且对指令进行综合性的基础应用联系.(样式没有写,仅实现了vue指令的功能.) <!DOCTYPE html> <html lang=&quo ...
VUE入门+5个小案例
本文是我心血来潮学习Vue框架所做的笔记,也供童鞋们学习参考.作为后端的开发人员,学习前端的Vue框架只是单纯地去了解下前端框架的内容,所以并没有深入地去学习,因此本文只适合Vue入门的童鞋哦.由于我 ...
axios vue 回调函数_Vue 02 —— Vue 入门小案例~使用 Axios 中的GET、POST请求
作为后端攻城狮,写前端代码是一种什么体验? 相信不少人和 @Python大星一样,有写过前端代码的经历. 记录一下,Vue 框架开发中"啼笑皆非"的故事,非专业前端人员,该案例无 ...

Vue小案例1：计数器

Vue小案例1：计数器

Vue小案例1：计数器相关推荐

最新文章

热门文章