vue实现计时器,vue计时

　　本文主要详细介绍了Vue计数器的实现方法。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。

　　本文分享了Vue计数器显示的具体代码，供大家参考。具体内容如下

　　效果：

　　！声明文档类型

　　html lang=en

　　头

　　meta charset=UTF-8

　　标题计数器/标题

　　script src= https://cdn . jsdelivr . net/NPM/vue/dist/vue . js /script

　　style type=text/css

　　#app{

　　文本对齐：居中；

　　边距：0自动；

　　行高：500像素；

　　}

　　#应用程序输入{

　　宽度：50px

　　高度：40px

　　字体大小：20px

　　边框半径：5px

　　大纲：无；

　　/*自定义边框*/

　　边框：1px纯色透明；

　　背景色：蓝色；

　　行高：30px

　　颜色：白色；

　　}

　　#app span{

　　填充：20px 20px

　　边框：1px

　　}

　　/风格

　　/头

　　身体

　　div id=应用程序

　　input type= button value=- @ click= sub /

　　span{{num}}/span

　　输入类型=button 值= @click=add/

　　/div

　　脚本

　　var app=新Vue({

　　埃尔： #app ，

　　数据：{

　　数字：1

　　},

　　方法：{

　　add: function(){

　　if(this.num10){

　　this.num

　　}否则{

　　Alert(这是最大值！);

　　}

　　},

　　sub:函数(){

　　if(this.num0){

　　this . num-；

　　}否则{

　　Alert(没了！);

　　}

　　}

　　}

　　})

　　/脚本

　　/body

　　/html

　　写入data:num所需的数据

　　将两种方法添加到-methods:加(add)、减(sub)

　　使用v-text或差分表达式将num设置为span标签。

　　用v-on:(缩写，@)分别绑定add和sub到+、-按钮。

　　累加逻辑：小于10累加，否则提示

　　递减逻辑：逐渐大于0，否则提示

　　方法通过this关键字获取data中的数据。

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

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。