<!DOCTYPE html>

<html lang='en'>

<head>

    <meta charset='UTF-8'>

    <meta name='viewport' content='width=device-width, initial-scale=1.0'>

    <meta http-equiv='X-UA-Compatible' content='ie=edge'>

    <script src='../lib/vue-2.4.0.js'></script>

     <title>title</title>

</head>

<body>

    <div id='app'>

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

        <select v-model="opt">

            <option value="+">+</option>

            <option value="-">-</option>

            <option value="*">*</option>

            <option value="/">/</option>

        </select>

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

        <button @click="result">=</button>

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

    </div>

    <script>

        var  demo  = new Vue({

             el: '#app',

            data: {

                str1:0,

                str2:0,

                str3:0,

                opt:'-'

            },

            methods:{

                result(){

                    var codeStr = parseFloat(this.str1)+this.opt+parseFloat(this.str2)

                    this.str3 = eval(codeStr)

                }

            }

     })

    </script>

</body>

</html>

v-model下的简易 计算器

<!DOCTYPE html>

<html lang='en'>

<head>

    <meta charset='UTF-8'>

    <meta name='viewport' content='width=device-width, initial-scale=1.0'>

    <meta http-equiv='X-UA-Compatible' content='ie=edge'>

    <script src='../lib/vue-2.4.0.js'></script>

     <title></title>

</head>

<body>

    <div id='app'>

        <button @click="start">触发</button>

        <button @click="stop">停止</button>

        <p>{{str}}</p>

    </div>

    <script>

        var  demo  = new Vue({

             el: '#app',

            data: {

                str:"今天天气好晴朗，处处好风光!",

                flag:null

            },

            methods:{

                start(){

                if (this.flag!=null){

                    return

                }

                 this. flag =  setInterval(()=>{

                    var start1 = this.str.substring(0,1)

                    var end1 = this.str.substring(1)

                    this.str = end1 + start1

                    },400)

                },

                stop(){

                    clearInterval(this.flag)

                    this.flag =null

                }

            }

     })

    </script>

</body>

</html>

v-model下的跑马灯实验

Vue_小练习的更多相关文章

  1. vue_小项目_吃饭睡觉打豆豆

    vue_小项目_吃饭睡觉打豆豆 onmouseenter 和 onmouseleave : 在 移入/移出 子元素时不会重复触发 onmouseover 和 onmouseout : 在 移入/移出 ...

  2. vue_小项目_模糊搜索(列表过滤)_结果排序

    html <div id="test"> <label> <input type="text" v-model="sea ...

  3. 【小程序分享篇 二 】web在线踢人小程序，维持用户只能在一个台电脑持登录状态

    最近离职了, 突然记起来还一个小功能没做, 想想也挺简单,留下代码和思路给同事做个参考. 换工作心里挺忐忑, 对未来也充满了憧憬与担忧.(虽然已是老人, 换了N次工作了,但每次心里都和忐忑). 写写代 ...

  4. 【小程序分享篇 一 】开发了个JAVA小程序， 用于清除内存卡或者U盘里的垃圾文件非常有用

    有一种场景, 手机内存卡空间被用光了,但又不知道哪个文件占用了太大,一个个文件夹去找又太麻烦,所以我开发了个小程序把手机所有文件(包括路径下所有层次子文件夹下的文件)进行一个排序,这样你就可以找出哪个 ...

  5. jQuery实践-网页版2048小游戏

    ▓▓▓▓▓▓ 大致介绍 看了一个实现网页版2048小游戏的视频,觉得能做出自己以前喜欢玩的小游戏很有意思便自己动手试了试,真正的验证了这句话-不要以为你以为的就是你以为的,看视频时觉得看懂了,会写了, ...

  6. 微信小程序开发心得

    微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受. 首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司 ...

  7. 前端网络、JavaScript优化以及开发小技巧

    一.网络优化 YSlow有23条规则,中文可以参考这里.这几十条规则最主要是在做消除或减少不必要的网络延迟,将需要传输的数据压缩至最少. 1)合并压缩CSS.JavaScript.图片,静态资源CDN ...

  8. 微信应用号（小程序）开发IDE配置（第一篇）

    2016年9月22日凌晨,微信宣布“小程序”问世,当然只是开始内测了,微信公众平台对200个服务号发送了小程序内测邀请.那么什么是“小程序”呢,来看微信之父怎么说 看完之后,相信大家大概都有些明白了吧 ...

  9. Chrome出了个小bug：论如何在Chrome下劫持原生只读对象

    Chrome出了个小bug:论如何在Chrome下劫持原生只读对象 概述 众所周知,虽然JavaScript是个很灵活的语言,浏览器里很多原生的方法都可以随意覆盖或者重写,比如alert.但是为了保证 ...

随机推荐

  1. Android基础笔记（十三）- 内容提供者原理和简单使用

    为什么要有内容提供者 内容提供者的工作原理 使用内容解析者对内容提供者进行增删改查操作 利用内容提供者和内容解析者备份手机短信 利用内容提供者插入短信 为什么要有内容提供者 内容提供者技术的目的是: ...

  2. leetCode(38):Lowest Common Ancestor of a Binary Search Tree

    Given a binary search tree (BST), find the lowest common ancestor (LCA) of two given nodes in the BS ...

  3. spring data redis jackson 配置，工具类

    spring data redis 序列化有jdk .jackson.string 等几种类型,自带的jackson不熟悉怎么使用,于是用string类型序列化,把对象先用工具类转成string,代码 ...

  4. rtmutex赏析

    [摘要] rtmutex作为futex的底层实现,有两个比較重要的特性.一个是优先级继承,一个是死锁检測.本文对这两个特性的实现进行说明. 一.优先级继承 2007年火星探路者号的vxworks上发生 ...

  5. SVN管理工具的使用（实习第9天）

    最后就是我进行提交代码的时候要记得写注释,自己写了那些方法要标明,或者自己修改了哪些功能也要表明.不然我会被骂的. 2>代码冲突解决的问题: 服务器上的代码跟自己代码改动的地方不同 这种情况比较 ...

  6. h5登录

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Con ...

  7. python-网络-udp

    python-网络-udp 标签(空格分隔): python 开发环境:windows Pycharm+python3.* 工具:网络调试助手 UDP[client]-发送数据 from socket ...

  8. EasyUI 之 DataGrid利用用拉姆达表达式实现分页查询

      首先,我们在DataGrid的URL中加上我们要查询的条件:查询用户名不是“呵呵”的所有用户. <div> <table id="dg" class=&quo ...

  9. 洛谷P2408 不同子串个数 后缀数组 + Height数组

    ## 题目描述: 给你一个长为 $N$ $(N<=10^5)$ 的字符串,求不同的子串的个数我们定义两个子串不同,当且仅当有这两个子串长度不一样 或者长度一样且有任意一位不一样.子串的定义:原字 ...

  10. iOS开发——剪切板

    剪切板的调用是很简单的,常用的就这两个,不管文字或是图片的粘贴复制,对剪切板的操作就是基于下面两个属性的: [UIPasteboard generalPasteboard].string [UIPas ...