<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>vue</title>

    <link rel="stylesheet" href="">

    <!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->

    <!--<script type="text/javascript" src="../js/jquery-2.1.4.min.js"></script>-->

    <script type="text/javascript" src="../js/vue.js"></script>

</head>

<body>

    <div id="vue">

        <div>

            <span v-if="num > 0" v-on:click="dec(num)">-</span>

            <input v-model="num" type="text">

            <span v-on:click="inc(num)">+</span>

        </div>

    </div>

</body>

<script type="text/javascript">

    var app = new Vue({

        el: "#vue",

        methods:{

            dec:function(num){

                if(app.num>0){

                    app.num=num-1;

                    console.log(app.num);

                }

            },

            inc:function(num){

                app.num=num+1;

                console.log(app.num);

            }

        },

        data:{

            num:0,

        }

    });

</script>

</html>

效果:

12.2 VUE学习之-if判断,实践加减input里的值的更多相关文章

  1. 11.VUE学习之提交表单时拿到input里的值

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  2. 12.1.VUE学习之-循环li,if判断示例讲解class中应用表达式

    功能: 当点击按键时,改变当前循环数组里的status里的值, 判断staus里的当前的值来,切换显示 删除 和 恢复 的按钮 判断staus里的当前的值来改变span标签里的字体颜色样式 <! ...

  3. php学习笔记：foreach循环访问关联数组里的值

    foreach循环可以将数组里的所有值都访问到,下面我们展示下,用foreach循环访问关联数组里的值. 例如: $fruit=array('apple'=>"苹果",'ba ...

  4. Vue学习记录第一天

    今天开始了Vue的学习,下面我就记录一下学习了什么. 1.什么是Vue? vue是一套基于javaScript的渐进式框架,是MVVM框架.View ——ViewModel——Model  其中Vie ...

  5. 09.1.VUE学习之watch监听属性变化实现类百度搜索栏功能ajax异步请求数据,返回数组

    09.1html里 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  6. 10.VUE学习之使用lodash库减少watch对后台请求的压力

    问题描述 使用watch监听库里word的值的变化,获取新值后,用oxios发送的ajax异步请求, 此时会多次发送请求,浪费服务器资料. 解决办法 使用lodash库里的_.debounce函数延缓 ...

  7. 09.VUE学习之watch监听属性变化实现类百度搜索栏功能ajax异步请求数据,返回字符串

    cmd下安装axios npm install axios 安装好后,会多出node_modules文件夹 思路: 监听data里的word改变时,发送ajax异步请求数据, 把返回的数据赋值给dat ...

  8. legend2---开发日志12（vue如何进一步学习）

    legend2---开发日志12(vue如何进一步学习) 一.总结 一句话总结:还是得找教程(比如视频),自己摸索太浪费时间,也容易踩坑和抓不住重点 还是得找教程(比如视频),自己摸索太浪费时间,也容 ...

  9. Vue学习-01

    1.vue 学习 v-bind:title 数据绑定 v-if 判断显示或者隐藏 <div id="app-3"> <p v-if="seen" ...

随机推荐

  1. 牛客网Java刷题知识点之构造函数与set方法、与类名同名的一般方法、构造函数中有return语句

    不多说,直接上干货! 通过 牛客网Java刷题知识点之构造函数是什么.一般函数和构造函数什么区别呢.构造函数的重载.构造函数的内存图解 我们对构造函数有了一个比较清楚的认识,当我们在创建对象时,我们会 ...

  2. koa2 从入门到进阶之路 （五）

    之前的文章我们介绍了一下 koa 中使用 ejs 模板及页面渲染,本篇文章我们来看一下 koa post提交数据及 koa-bodyparser中间件. 在前端页面中,不免会用到 form 表单和 p ...

  3. Java 内存模型（一）

    打算花比较长的篇幅来描述下自己理解的JVM,尽量描述的清晰易懂一些,从简单慢慢到慢慢深入,一方面自己也复习一下,一方面也供大家参考,少走些弯路.鉴于本人水平有限,如有错误的地方,欢迎指出,感谢. 一段 ...

  4. .NET Core微服务 权限系统+工作流（二）工作流系统

    一.前言 接上一篇 .NET Core微服务 权限系统+工作流(一)权限系统 ,再来一发 工作流,我在接触这块开发的时候一直好奇它的实现方式,翻看各种工作流引擎代码,探究其实现方式,个人总结出来一个核 ...

  5. Dos窗口一闪而过，如何查看错误？

    问:Dos窗口一闪而过,如何查看错误? 答:在执行程序最后追加pause或者read(,),即可查看错误信息.

  6. centos执行apt-get提示不存在

    在centos下用yum install xxx yum和apt-get的区别 一般来说著名的linux系统基本上分两大类: 1.RedHat系列:Redhat.Centos.Fedora等 2.De ...

  7. 2016多校训练3_1007(hdu5758 Explorer Bo)

    #include <functional> #include <algorithm> #include <iostream> #include <iterat ...

  8. ArrayList与Vector区别

    ArrayList与Vector区别表 ArrayList Vector 1.实现原理:采用动态对象数组实现,默认构造方法创建了一个空数组 1.实现原理:采用动态数组对象实现,默认构造方法创建了一个大 ...

  9. CAD Import .NET支持AutoCAD DWG 2013

    CADSoftTools发布了CAD Import .NET 9一个新版本.NET开发库,可以提供给开发人员导入AutoCAD DWG.DXF.HPGL.PLT.CGM等格式的功能. 在新版本中,CA ...

  10. 知乎日报客户端应用ios源码

    swift开发的知乎日报客户端详细源码,里面分UI和网络两个模块. 1.涉及到了大部分的UI控件的使用(甚至包括UIRefreshView,UITableConrol等等)2.Connection完成 ...