<!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. .net 记录

    Stack Overflow 2016最新架构探秘 http://www.infoq.com/cn/news/2016/03/Stack-Overflow-architecture-insi#rd N ...

  2. Elasticsearch在后台启动

    Elasticsearch在linux下使用命令sh elasticsearch start,按键ctrl+c的时候程序就会stop掉,如何将程序在后台启动呢? 需要使用:./elasticsearc ...

  3. 并发包阻塞队列之ArrayBlockingQueue

    并发包阻塞队列之ArrayBlockingQueue   jdk1.7.0_79  上一节中对并发包中的非阻塞队列ConcurrentLinkedQueue的入队.出队做了一个简要的分析,本文将对并发 ...

  4. java8Stream map和flatmap的区别

    map和flatmap的区别 map只是一维 1对1 的映射 而flatmap可以将一个2维的集合映射成一个一维,相当于他映射的深度比map深了一层 , 所以名称上就把map加了个flat 叫flat ...

  5. ABAP WRITE

    1.空行 WRITE /. 2.AS CHECKBOX VALUE 'X', check2 VALUE ' '. START-OF-SELECTION. WRITE: / check1 AS CHEC ...

  6. 【经验总结】datagrid锁定列后重新加载时出现错位问题的解决

    [问题描述]:有时候datagrid设置了锁定列后,在重新加载datagrid数据时,出现锁定列与非锁定列数据错位的问题,如图: [问题分析]:查看css样式我们发现,锁定的列和非锁定的列属于两个不同 ...

  7. php 05

    流程控制 一.流程控制 1.顺序结构 //自上而下 从左到右 2.条件分支结构 a. 单向分支结构 if() 只能管理一条指令 这条指令是和他紧跟着的指令 if(){} 只能管理整个花括号里面的代码 ...

  8. Visual Studio 2015 终于还是装上了

    win8.1系统 vs2015.preview_ult_CHT.iso 大小4.46G, http://download.microsoft.com/download/9/9/1/99133C05-3 ...

  9. 新版graylog2安装过程

    Graylog是一个开源的 log 收容器,背后的储存是搭配 mongodb,而搜寻引擎则由 elasticsearch 提供.以前版本主要有两个部分集合而成 server 与 web interfa ...

  10. HDU 4745 Two Rabbits （区间DP）

    题意: 两只兔子,在一个由n块石头围成的环上跳跃,每块石头有一个权值ai.开始时两兔站在同一石头上(也算跳1次),一只从左往右跳,一只从右往左跳,两只同时跳,而每跳一次,两只兔子所站的石头的权值都要相 ...