<!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. 最大利润-城市A和B

    1,问题描述 jack每天同时只能在A和B其中一个城市工作赚钱,假设两个城市间的交通费为m.已知每天在A 和 B 能赚到多少钱,那么jack怎么选择每天工作的城市才能赚到最大利润. 比如 moneyA ...

  2. lecture-9-hashmap

    1.hashmap基本操作 2.hash function,equals函数,hashCode 3.练习题 1)Two Sum Given an array of integers, return i ...

  3. Hive 基本语法操练（六）：Hive 的权限控制

    Hive 的权限控制 Hive从0.10可以通过元数据控制权限.但是Hive的权限控制并不是完全安全的.基本的授权方案的目的是防止用户不小心做了不合适的事情. 为了使用Hive的授权机制,有两个参数必 ...

  4. 有趣的 验证JS只能输入正整数

    <html> <head> <title>只能输入正整数</title> </head> <body> 兑换数量:<inp ...

  5. X64下IIS调用32位的dll

    WebAPI项目中遇到了需要调用32位C++的dll的情况,调试的时候能正常调用,但是发布了之后部署在IIS中出现了BadFormatImage异常, 解决方法是在IIS中相应应用程序池=>高级 ...

  6. spring boot 基础 多环境配置

    对于多环境的配置,各种项目构建工具的思路基本上一致,都是通过配置多份不同环境的配置文件来区分. 1. 首先我们先创建不同环境下的属性文件,截图如下: application.properties  是 ...

  7. hibernate课程 初探单表映射3-3 对象类型

    本节简介: 1 简介对象类型(重点是音视频blob类型) 2 demo(对图片的写入数据库与读取) 1 简介对象类型 映射类型 java类型 标准sql类型 mysql类型 oracle类型 bina ...

  8. 《Head First 设计模式》之单件模式

    单件模式(Singleton) ——确保一个类只有一个实例,并提供全局访问点. 有一些对象其实我们只需要一个,比如线程池.缓存.对话框.处理偏好设置和注册表的对象.日志对象.如果制造出多个实例,就会导 ...

  9. nc扫描端口

    nc -n -v -z -w 1 ip地址 1-1000 (端口号) 详细信息 -v 排除dns  -n 不发送任何数据-z 超时设置为1秒 -w 1

  10. linux中配置yum源

    1.配置163或者阿里云yum源: 阿里云yum源地址:https://mirrors.aliyun.com/centos/6.9/os/x86_64/Packages/ 阿里云给出的解决办法:htt ...