<!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. JS 去除字符串中的最后一个字符

    var str = 'Hello World!'; str = str.substr(0,str.length-1); alert(str);

  2. XXXfragment that is not a fragment错误，fragment认不出来

    要注意的是fragment事实上是有两个版本号的,一个是 import android.support.v4.app.Fragment; 另外一个是 import android.app.Fragme ...

  3. mysql-面试题目1

    一.数据库的ACID 原子性(Atomicity):保证事务中的所有操作全部执行或全部不执行. 一致性(Consistency):保证数据库始终保持数据的一致性——事务操作之前和之后都是一致的. 隔离 ...

  4. SQLSever: 怎样在select中的每一行产生不同的随机数？

    select 的随机函数有点假, 或许是由于它是基于时间来的吧, 同一select中由于时间无法错开导致产生的随机数都是一样的. 怎样做到让不同的行拥有不同的随机数呢? 以下以产生某个月的随机日期来演 ...

  5. Web端本地存储

    1.需求背景:当用户在页面上添加一行一行的数据时,突然发现网络断掉了,页面上编辑的数据没法保存进数据库,所以需要一个本地端的临时保存功能,以便在网络通畅后重新加载出来! 2.解决方案: 结合网上搜刮, ...

  6. zzulioj--1776--和尚特烦恼2——第几个素数(技巧模拟)

    1776: 和尚特烦恼2--第几个素数 Time Limit: 1 Sec  Memory Limit: 128 MB Submit: 267  Solved: 100 SubmitStatusWeb ...

  7. 20.计算速度最快的valarray

    #include <string> #include <iostream> //用于计算,计算的性能高于vector与array #include <valarray&g ...

  8. 5.QT制作编译器,可以简单支持中文编程

    学习了文件操作,那么先做一个自制的IDE吧,就是简单的读取,修改,保存文件,使用QT语言,附上github的代码:QT基本文件操作实现中文编程 截图: 运行效果

  9. BackTrack5里使用OpenVAS

    不多说,直接上干货! 前提 VM虚拟机的 BackTrack5安装完美图文教程: http://download.csdn.net/detail/u010106732/9845495 关于OpenAV ...

  10. 【C#Windows 服务】 《三》Timer设置

    一.工具: VS2015+NET Framework4.5. 二.操作: 1.计时器设置: 2.日志代码: 三.代码: 1.日志代码: 1 /// <summary> 2 /// Wind ...