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/原作者: ...
随机推荐
- Js6利用class创建类
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Blockchain
一.中心化 中心化原则是我们日常比较常见的支付手段. 科普文章喜欢用网购举例: 1.你在某宝支付了一件商品,钱先到马云爸爸手中,通知商家发货: 2.商家发货,你收货后确认无误,点击确认收货: 3.马云 ...
- 数学--数论--HDU 5223 - GCD
Describtion In mathematics, the greatest common divisor (gcd) of two or more integers, when at least ...
- 题目分享Q
题意:给出一个N个点的树,找出一个点来,以这个点为根的树时,所有点的深度之和最大 分析:这可以说是换根法的裸题吧 首先考虑对一个给定的根如何计算,这应该是最简单的那种树形dp吧甚至可能都不算dp(好像 ...
- 精通awk系列文章
精通awk系列文章 我录制了两个awk相关的视频教程: Awk经典实战案例精讲 精通awk精品课程:awk从入门到精通 1.安装新版本的gawk 2.本教程测试所用示例文件 3.铺垫知识:读取文件的几 ...
- Spring中资源的加载原来是这么一回事啊！
1. 简介 在JDK中 java.net.URL 适用于加载资源的类,但是 URL 的实现类都是访问网络资源的,并没有可以从类路径或者相对路径获取文件及 ServletContext , 虽然可以通过 ...
- Flutter 1.17版本重磅发布
Flutter 1.17 是2020年的第一个稳定版本,此版本包括iOS平台Metal支持(性能更快),新的Material组件,新的Network跟踪工具等等! 对所有人来说,今年是充满挑战的一年. ...
- Web框架，Hibernate向数据库插入数据，数据库没有值怎么办？
用web框架技术,使用Hibernate向数据库添加信息,控制台显示插入成功的语句,可是数据库却没有值:错误如下: (1)不要自己创建数据库!!,Web框架可以自己自动生成,自己创建可能会报错! (2 ...
- Oracle创建包
包: 在公司中,如果业务逻辑比较复杂,需要定义很多过程或者函数.有可能需要定义几十个过程或者函数,这些过程或者函数如果都放到一起,是不是不好管理?我们一般使用包来管理过程或者函数,一个包中可以定义多个 ...
- 第十一章：Python高级编程-协程和异步IO
第十一章:Python高级编程-协程和异步IO Python3高级核心技术97讲 笔记 目录 第十一章:Python高级编程-协程和异步IO 11.1 并发.并行.同步.异步.阻塞.非阻塞 11.2 ...