vue仿移动端输入框
<!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仿移动端输入框的更多相关文章
- vue-resource使用 (vue仿百度搜索)
1.this.$http.get()方法2.this.$http.post()方法3.this.$http.jsonp()方法 (vue仿百度搜索) 在输入框中输入a, 然后在百度f12 ==> ...
- vue 仿今日头条
vue 仿今日头条 为了增加移动端项目的经验,近一周通过 vue 仿写今日头条,以下就项目实现过程中遇到的问题以及解决方法给出总结,有什么不正确的地方,恳请大家批评指正^ _ ^!,代码仓库地址为 g ...
- Nuxt|Vue仿探探/陌陌卡片式滑动|vue仿Tinder拖拽翻牌效果
探探/Tinder是一个很火的陌生人社交App,趁着国庆假期闲暇时间倒腾了个Nuxt.js项目,项目中有个模块模仿探探滑动切换界面效果.支持左右拖拽滑动like和no like及滑动回弹效果. 一览效 ...
- Vue.js 服务端渲染业务入门实践
作者:威威(沪江前端开发工程师) 本文原创,转载请注明作者及出处. 背景 最近, 产品同学一如往常笑嘻嘻的递来需求文档, 纵使内心万般拒绝, 身体倒是很诚实. 接过需求,好在需求不复杂, 简单构思 后 ...
- ASP.NET Core 与 Vue.js 服务端渲染
http://mgyongyosi.com/2016/Vuejs-server-side-rendering-with-aspnet-core/ 原作者:Mihály Gyöngyösi 译者:oop ...
- vue.js移动端配置flexible.js
前言 最近在用vue做移动端项目,网上找了一些移动端适配的方案,个人觉得手淘团队flexible.js还是比较容易上手,在这里做下总结. 主体 flexible.js适配方案采用rem布局,根据屏幕分 ...
- 追求极致的用户体验ssr(基于vue的服务端渲染)
首先这篇博客并不是ssr建议教程,需要ssr入门的我建议也不要搜索博客了,因为官网给出了详细的入门步骤,只需要step by step就可以了,这篇博客的意义是如何使用ssr,可能不同的人有不同的意见 ...
- Vue（SPA） WebPack模块化打包、SEO优化（Vue SSR服务端同构直出）、全浏览器兼容完整解决方案
白驹过隙,时光荏苒 大概去年这个时候写了angular 结合webpack的一套前端方案,今年此时祭出vue2结合webpack的一套前端方案. 明年的这个时候我又是在做什么... 读在最前面: 1. ...
- NET Core 与 Vue.js 服务端渲染
NET Core 与 Vue.js 服务端渲染 http://mgyongyosi.com/2016/Vuejs-server-side-rendering-with-aspnet-core/原作者: ...
随机推荐
- 前端存储 (5) - service worker 离线存储
service worker 离线存储 简介: 一般的网站 在我们无法访问的 时候 一般 回出现 如下 该网页无法访问 service worker 构建的网站不会出现这个错误,因为所有的 请求都是先 ...
- muduo网络库源码学习————线程本地单例类封装
muduo库中线程本地单例类封装代码是ThreadLocalSingleton.h 如下所示: //线程本地单例类封装 // Use of this source code is governed b ...
- mysql-case..when知识点总结
case...when..有两种语法: 第一种: case case_value when when_value then statement_list [when when_value the ...
- C# 9.0 新特性预览 - 类型推导的 new
C# 9.0 新特性预览 - 类型推导的 new 前言 随着 .NET 5 发布日期的日益临近,其对应的 C# 新版本已确定为 C# 9.0,其中新增加的特性(或语法糖)也已基本锁定,本系列文章将向大 ...
- IDEA2020版使用
idea2020版本出来了,不知道小伙伴使用了吗?是不是还在为激活而烦恼呢?我来给小伙伴解决烦恼了,直接上硬货,解决方法我是在B站找到,所以分享出来! 1.直接进IDEA官网下载最近的idea,官网连 ...
- G - Pictures with Kittens (easy version) dp
https://codeforces.com/problemset/problem/1077/F1 这个其实是一个比较简单的dp了 题目大意: 给你n个数,让你从n个数里选出x个数,并且每隔k个至少选 ...
- QML设计飘散效果
1,目标及展示 首先希望实现文字.图片.控件等在触发后,呈现飘散并消失的效果.在QT例程<Qt Quick Particles Examples>是一个海星点击鼠标后呈现打散的效果,这个效 ...
- 【HBase】带你了解一哈HBase的各种预分区
目录 简单了解 概述 设置预分区 一.手动指定预分区 二.使用16进制算法生成预分区 三.将分区规则写在文本文件中 四.使用JavaAPI进行预分区 简单了解 概述 由上图可以看出,每一个表都有属于自 ...
- 标准IDOC同步采购订单
目录 1功能说明 4 2功能实现 4 2.1创建逻辑系统并分配集团(SALE) 4 2.2维护RFC目标(SM59) 5 2.3在发送端创建模型视图(BD64) 5 2. ...
- java8 新特性Stream流的应用
作为一个合格的程序员,如何让代码更简洁明了,提升编码速度尼. 今天跟着我一起来学习下java 8 stream 流的应用吧. 废话不多说,直入正题. 考虑以下业务场景,有四个人员信息,我们需要根据性 ...