Vue基础应用-实现计数器

计数器效果图

实现

主要用到的指令有v-text、v-on。
基本框架显示框架是左右两个button，中间一个span标签。
逻辑就是写两个函数add，min分别设置为右左两个btn的单击事件。
事件绑定用到v-on:click的简写@click。

实现代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>小计数器</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body><div id="sumApp"><!--减按钮--><button @click="min">-</button>     <!--显示数量--><span>{{ curNum }}</span><!-- 加按钮 --><button @click="add">+</button></div><script>var vu = new Vue({el: "#sumApp",  //挂载data:{curNum: 0},methods:{// 添加函数add: function(){if(this.curNum>=10){alert("已经到最大数目！！！");}else{this.curNum += 1;}},//减数函数min: function(){if(this.curNum<=0){alert("数量不能小于0！！！");}else{this.curNum -= 1;}}}});</script>
</body>
</html>

Vue基础应用-实现计数器相关推荐

Vue知识（一）Vue基础语法
Vue知识一.邂逅Vue.js 1.认识Vue.js 2.Vue.js安装方式 3.Vue初体验 4.Vue的MVVM框架二.Vue基础语法 v-if指令 v-show指令 v-else指令 v- ...
前端学习——vue基础知识
1. Vue初体验: 1.1 导入开发版本的Vue.js <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ...
Vue——基础语法篇
Vue--基础语法篇 author:木子六日学习视频来源 coderwhy老师的vue教学文章目录 Vue--基础语法篇 author:木子六日学习视频来源 01.hello vue 02.vu ...
（vue基础试炼_05）简单组件之间的传值
接上一篇:(vue基础试炼_04)使用组件改造TodoListhttps://gblfy.blog.csdn.net/article/details/103844256 文章目录一.上篇回顾 ① 代 ...
（vue基础试炼_04）使用组件改造TodoList
接上一篇:(vue基础试炼_03)使用vue.js实现TodoListhttps://gblfy.blog.csdn.net/article/details/103842233 指令说明 v-bin ...
（vue基础试炼_03）使用vue.js实现TodoList
接上一篇:(vue基础试炼_02)使用vue.js实现隔2秒显示不同内容https://gblfy.blog.csdn.net/article/details/103841818 指令作用 v-fo ...
（vue基础试炼_02）使用vue.js实现隔2秒显示不同内容
接上一篇:(vue基础试炼_01)使用vue.js 快速入门hello worldhttps://gblfy.blog.csdn.net/article/details/103841156 文章目录 ...
（vue基础试炼_01）使用vue.js 快速入门hello world
文章目录一.需求案例二.案例实现 2.1. 原始js写法 2.2. 怎样使用vue.js ? 2.3. 使用vue.js 写法三.案例vue简述? 四.案例趣味延伸五.表达值作用及嘱咐语一. ...
vue基础知识之vue-resource/axios
Vue基础知识之vue-resource和axios(三) vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没有必 ...
Vue基础语法知识（自用，完整版）
Vue基础语法知识 1.想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象 2.root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法 3.root容器中里的代码被称为 ...

Vue基础应用-实现计数器

计数器效果图

实现

Vue基础应用-实现计数器相关推荐

最新文章

热门文章