<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

    </head>

    <style type="text/css">

        [v-cloak] {

            display: none;

        }

        #a {

            width: 500px;

            height: 50px;

            border: 1px solid #000000;

            display: flex;

        }

        #a span {

            flex: 1;

            border: 1px solid red;

        }

    </style>

    <body>

        <div id="el"  v-cloak>

            <input type="text" name="" id="" value="" :autofocus="mos" maxlength="6" v-model="content" />

            <div id="a">

                <span>{{content[0]}}</span>

                <span>{{content[1]}}</span>

                <span>{{content[2]}}</span>

                <span>{{content[3]}}</span>

                <span>{{content[4]}}</span>

                <span>{{content[5]}}</span>

            </div>

        </div>

    </body>

</html>

<script src="vue.js" type="text/javascript"></script>

<script type="text/javascript">

    var vm = new Vue({

        el: "#el",

        data: {

            mos: "autofocus",

            /* 自动获取焦点*/

            content: []

        },

        methods: {

        },

        mounted:{

        }

    })

</script>

vue仿移动端输入框的更多相关文章

  1. vue-resource使用 (vue仿百度搜索)

    1.this.$http.get()方法2.this.$http.post()方法3.this.$http.jsonp()方法 (vue仿百度搜索) 在输入框中输入a, 然后在百度f12 ==> ...

  2. vue 仿今日头条

    vue 仿今日头条 为了增加移动端项目的经验,近一周通过 vue 仿写今日头条,以下就项目实现过程中遇到的问题以及解决方法给出总结,有什么不正确的地方,恳请大家批评指正^ _ ^!,代码仓库地址为 g ...

  3. Nuxt|Vue仿探探/陌陌卡片式滑动|vue仿Tinder拖拽翻牌效果

    探探/Tinder是一个很火的陌生人社交App,趁着国庆假期闲暇时间倒腾了个Nuxt.js项目,项目中有个模块模仿探探滑动切换界面效果.支持左右拖拽滑动like和no like及滑动回弹效果. 一览效 ...

  4. Vue.js 服务端渲染业务入门实践

    作者:威威(沪江前端开发工程师) 本文原创,转载请注明作者及出处. 背景 最近, 产品同学一如往常笑嘻嘻的递来需求文档, 纵使内心万般拒绝, 身体倒是很诚实. 接过需求,好在需求不复杂, 简单构思 后 ...

  5. ASP.NET Core 与 Vue.js 服务端渲染

    http://mgyongyosi.com/2016/Vuejs-server-side-rendering-with-aspnet-core/ 原作者:Mihály Gyöngyösi 译者:oop ...

  6. vue.js移动端配置flexible.js

    前言 最近在用vue做移动端项目,网上找了一些移动端适配的方案,个人觉得手淘团队flexible.js还是比较容易上手,在这里做下总结. 主体 flexible.js适配方案采用rem布局,根据屏幕分 ...

  7. 追求极致的用户体验ssr(基于vue的服务端渲染)

    首先这篇博客并不是ssr建议教程,需要ssr入门的我建议也不要搜索博客了,因为官网给出了详细的入门步骤,只需要step by step就可以了,这篇博客的意义是如何使用ssr,可能不同的人有不同的意见 ...

  8. Vue（SPA） WebPack模块化打包、SEO优化（Vue SSR服务端同构直出）、全浏览器兼容完整解决方案

    白驹过隙,时光荏苒 大概去年这个时候写了angular 结合webpack的一套前端方案,今年此时祭出vue2结合webpack的一套前端方案. 明年的这个时候我又是在做什么... 读在最前面: 1. ...

  9. NET Core 与 Vue.js 服务端渲染

    NET Core 与 Vue.js 服务端渲染 http://mgyongyosi.com/2016/Vuejs-server-side-rendering-with-aspnet-core/原作者: ...

随机推荐

  1. 解决Chrome插件安装时出现的“程序包无效”问题

    问题原因,新版的插件头部文件的修改,导致旧版的插件包无法使用,解决方式:解压. 1.把下载后的.crx扩展名的离线Chrome插件的文件扩展名改成.zip或者.rar(如果看不到Chrome插件的扩展 ...

  2. 一句话教你分清楚UML组合聚合和联系！

    组合:组合后的实体消失,则所有构成实体的部件都无意义,可以理解为不能独立存在 定义: 与聚合相比,组合描述的是这样的关联关系,部分离开整体后就没有实际意义了.所以我们说组合是一种很强的关联关系. 例子 ...

  3. 图论--差分约束--POJ 2983--Is the Information Reliable?

    Description The galaxy war between the Empire Draco and the Commonwealth of Zibu broke out 3 years a ...

  4. Docker docker-compose 配置lnmp开发环境

    1.安装docker yum -y install dockersystemctl start dockersystemctl enable docker 安装docker-compose https ...

  5. MySQL——视图/触发器/事务/存储过程/函数/流程控制

    一 视图 视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用[名称]即可获取结果集,可以将该结果集当做表来使用. 使用视图我们可以把查询过程中的 ...

  6. 解决Vue中文本输入框v-model双向绑定后数据不显示的问题

    前言 项目中遇到一个问题就是在Vue中双向绑定对象属性时,手动赋值属性后输入框的数据不实时更新的问题. <FormItem label="地址" prop="eve ...

  7. win7 64位系统使用vs2010编译OSG3.2.1

    首先我想说的是,osg是有二进制安装包的:http://openscenegraph.alphapixel.com/osg/downloads/free-openscenegraph-binary-d ...

  8. NLP（二十九）一步一步，理解Self-Attention

      本文大部分内容翻译自Illustrated Self-Attention, Step-by-step guide to self-attention with illustrations and ...

  9. centos系统克隆

    首先保证虚拟机处于关机状态. 1.修改网卡信息 vi /etc/sysconfig/network-scripts/ifcfg-eth0 删除网卡信息HWADDR与UUID信息 修改IPADDR信息为 ...

  10. Oracle触发器之替代触发器

    替代触发器 替代视图增删改操作.视图可以认为成逻辑上的一张表,类似于把一个sql语句的执行结果永久的像表存储到数据 库中,视图一般用来做查询. 创建视图的语法: create view 视图名称 as ...