<!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. Irrlicht 3D Engine 笔记系列 之 教程6- 2D Graphics

    作者:i_dovelemon 日期:2015 / 7 / 1 来源: CSDN 主题:2D Graphics, Irrlicht 教程翻译 本篇教程将要向大家展示怎样使用Irrlicht引擎绘制2D图 ...

  2. HDU4825:Xor Sum 解题报告(0/1 Trie树)

    Problem Description Zeus 和 Prometheus 做了一个游戏,Prometheus 给 Zeus 一个集合,集合中包含了N个正整数. 随后 Prometheus 将向 Ze ...

  3. [学习笔记]AJAX学习

    AJAX学习 ——在w3cschool学习AJAX的学习笔记 参考网站:w3cschool XMLHttpRequest 是 AJAX 的基础. XMLHttpRequest 对象 所有现代浏览器均支 ...

  4. PostgreSQL Replication之第四章 设置异步复制（4）

    4.4 基于流和基于文件的恢复 生活并不总只是黑色或白色:有时也会有一些灰色色调.对于某些情况下,流复制可能恰到好处.在另一些情况下,基于文件复制和PITR是您所需要的.但是也有许多情况下,您既需要流 ...

  5. PostgreSQL+pgpooll+Keepalived双机HA方案

    PostgreSQL+pgpooll+Keepalived双机HA方案 (注:本文档中的所有操作在没有说明的情况下都应该使用postgres用户进行操作,postgres用户没有权限的操作方可采用ro ...

  6. PL/SQL Developer 关闭Sql窗口快捷键

    preferences->keyconfigration->file/close然后设置你喜欢的按键就行了.(ps:这个close是关闭当前活动的那一个页面)

  7. 洛谷 P2486 [SDOI2011]染色 LCT

    Code: #include <cstdio> //SDOI2010 染色 #include <algorithm> #include <cstring> #inc ...

  8. CSS 预处理语言之 less 篇

    less 前言 Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量.混合(mixin).函数等功能,让 CSS 更易维护.方便制作主题.扩充. 安装 客户端使用 // 引入 ...

  9. win2003系统同步Linux ntp server批处理

    最后更新时间: 2018/12/15 一般windows配置时间服务器,只需要在windows系统右下角,点时间,里面配置好对应NTP服务器地址就行, 至多再修改一下注册表 HKEY_LOCAL_MA ...

  10. vue深究第一弹：computed与watch的异同

    最近在开发vue的过程中,不断用到了计算属性(computed)和观察者(watch),从逻辑上感觉它们很相似,但是尝试混用它们的时候,又出现了一些问题,那么它们到底有什么异同呢? 1. comput ...