<!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. react 工程起步 安装chrome 开发调试工具 react developer tools 及初建一个react 项目...

    1.安装react 开发工具 1.下载    chrome      react developer tools 下载地址:https://pan.baidu.com/s/1eSZsXDC  下载好是 ...

  2. 常用的CSS小技巧

    实际开发过程中会遇到一些需要用CSS小技巧处理的布局问题,现在分享几个个人工作中遇到的小问题和解决方案. 1.inline元素间的空白间隙 这里要介绍一个神器font-size:0. 如果你写了个列表 ...

  3. HTML5学习笔记之表格标签

    HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...

  4. Vim Operations

    Vim有三种模式:输入模式.命令模式和末行命令模式. 输入模式用来输入文字,命令模式用来下达编排文件的操作指令,末行命令模式用来进行文件存档.离开编辑器等操作. 进入及离开 末行模式下: :w 保存当 ...

  5. P1714切蛋糕(不定区间最值)

    题面 今天是小Z的生日,同学们为他带来了一块蛋糕.这块蛋糕是一个长方体,被用不同色彩分成了N个相同的小块,每小块都有对应的幸运值. 小Z作为寿星,自然希望吃到的第一块蛋糕的幸运值总和最大,但小Z最多又 ...

  6. B. Math Show 暴力 C - Four Segments

    B. Math Show 这个题目直接暴力,还是有点难想,我没有想出来,有点思维. #include <cstdio> #include <cstdlib> #include ...

  7. 如何优雅的使用Fegin去构造通用的服务调用的API

    第一步: 创建一个公共的API服务:命名为api(根据自己实际情况进行命名) <?xml version="1.0" encoding="UTF-8"?& ...

  8. 在使用SSH+Spring开发webservice ，报的一些异常及处理方法

    1.No bean named 'cxf' is defined 配置文件被我分成了三份,启动时忘记将webService配置导入到主文件,修改后如下: 2.bad request 400 访问路径写 ...

  9. Json格式数据的解析

    JSON是一种轻量级的数据交换格式,我们在编程中遇到的JSON数据通常就是一串字符串,只不过按照特定的格式去书写,这样当你把JSON数据传输给别人的时候对方只要使用这种特定的规则去阅读解析你的数据即可 ...

  10. PI/PO Token配置

    接收方通道配置 因为本例中需要在访问业务接口时,获取某平台的TOKEN认证,并在调用业务接口时,将TOKEN一同传给某平台,但是不能放在请求参数中,而是放在HTTP的Headers 注意!是Heade ...