<!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. RISC设计原则及基本技术

    CISC的特点: 指令系统庞大,指令功能复杂,指令寻址方式多,指令格式多 绝大多数指令须要多个机器周期完毕 各种指令都能够訪问存储器 採用微程序控制 有专用寄存器,少量 难以用优化编译技术生成高效的目 ...

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

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

  3. Car Talk2

    #! /usr/bin/python # -*- coding: utf-8 -*- # # # “Recently I had a visit with my mom and we realized ...

  4. HD-ACM算法专攻系列（3）——Least Common Multiple

    题目描述: 源码: /**/ #include"iostream" using namespace std; int MinComMultiple(int n, int m) { ...

  5. PGA和UGA内存的使用情况

    引用thomas kyte的PGA和UGA的统计内存的使用情况,用排序区不同的大小来查看pga.UGA.物理读取不同内存使用 会话1:创建测试表和测试不同排序大小 create table t as ...

  6. 虚拟主机TOMCAT配置

    在tomcat中添加虚拟主机: 编辑"tomcat\conf\server.xml",在"<Engine></Engine>"元素中新加 ...

  7. 关于table布局

    html-table 宝贝 状态 单价 数量 商品总价 运费 1sdsdf 2 3fffff 4sdfsfsffsdfs 5dsfs 6

  8. c# window服务-初学习

    window服务-初学习 一.工具: VS2015+NET Framework4.5. 二.操作: 1.新建windows服务的项目: 2.修改windows服务相关内容: 3.预览windows服务 ...

  9. angularjs 学习理解

    1AngularJS 是一个 JavaScript 框架.它是一个以 JavaScript 编写的库. 2 ng-app 指令定义一个 AngularJS 应用程序.ng-model 指令把元素值(比 ...

  10. Linux 设置交换分区

    当需要添加swap分区时,可以使用如下方法:设置交换分区:1 以dd指令建立swapoff2 mkswap 来将swapfile 格式化为swap的档案格式.3 swapon 来启动该系统文件,使之成 ...