<!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. Java学习书目

    Java学习书目 拜读了:http://www.importnew.com/26932.html#comment-636554

  2. HDOJ 5087 Revenge of LIS II DP

    DP的时候记录下能否够从两个位置转移过来. ... Revenge of LIS II Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: ...

  3. Android中的消息机制

    在分析Android消息机制之前.我们先来看一段代码: public class MainActivity extends Activity implements View.OnClickListen ...

  4. Data Member Order

    https://docs.microsoft.com/en-us/dotnet/framework/wcf/feature-details/data-member-order In some appl ...

  5. Can not Stop-Computer in powershell 6.0

    1 PS C:\Program Files\PowerShell\6.0.0-beta.6> Stop-ComputerStop-Computer : Failed to stop the co ...

  6. .Net配置虚拟域名

    1.在IIS中配置和地址端口,和名称. 2.在hosts文件中加上地址匹配. 3.重启IIS管理网站. 就可以通过虚拟域名进行访问了.

  7. hdoj--2036--改革春风吹满地(数学几何)

    改革春风吹满地 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Su ...

  8. Where to Store your JWTs – Cookies vs HTML5 Web Storage--转

    原文地址:https://stormpath.com/blog/where-to-store-your-jwts-cookies-vs-html5-web-storage Update 5/12/20 ...

  9. XML字符串解析实体类方法

    /// <summary> /// XML字符串解析实体类方法 /// </summary> public class StringXML { public StringXML ...

  10. Goldengate进程的合并与拆分规范

    Goldengate抽取进程的合并与拆分原则 1.    文档综述 1.1.  文档说明 本文档描述了对GoldenGate的抽取进程进行拆分和合并的基本原则和详细步骤.  1.2.  读者范围 本文 ...