博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vuejs 内置组件component实现tab切换懒加载和表单输入框内容的清空
阅读量:6504 次
发布时间:2019-06-24

本文共 1350 字,大约阅读时间需要 4 分钟。

最近项目中使用了vue2.0 官网脚手架进行了开发。开发中的踩一些坑一直没有来得及整理。本篇文章就vuejs内置组件component的一些使用进行一些总结。

1.使用component 实现tab切换中的实现对应的文件的懒加载

在父组件中很多个tab按钮,

图片描述
每个tab对应的内容都是不一样的,没有办法做成同一个模板来实现内容的显示。但不能一上来就将所有的内容都加载上来,因为很多时候,客户是不可能查看所有的内容的。
一开始,我们使用了 路由

使用了路由实现了懒加载,随后发现,如果在tab点击多次的话,就会产生一个问题就是,点击回退按钮的时候,tab显示会蹦来蹦去的,知道所有的历史记录倒退完了,怎么解决既能实现懒加载又不出现tab蹦来蹦去的现象。使用vuejs 内置组件component实现了这个功能。

使用element-ui中的tab标签和component结合实现了这个功能:

这样实现了tab切换使用懒加载。

2.表单输入框刷新

在一个页面中:

图片描述
点击添加按钮如何实现添加输入框显示:图片描述

但是添加成功后,当再次添加时,上次输入的内容还在,

图片描述

如何清除上次的内容呢,使用v-if只是实现输入框的显示与隐藏,无法实现清空内容,component组件又一次派上用场了。

这样就实现了录入后输入组件的清空

转载地址:http://dcqyo.baihongyu.com/

你可能感兴趣的文章
自适应网页设计
查看>>
获取BT节点信息bittorrent-discovery
查看>>
Centos 7使用vsftpd搭建FTP服务器
查看>>
linux下SVN不允许空白日志提交
查看>>
第2周第1课
查看>>
山寨c 标准库中的getline 函数
查看>>
shell时间
查看>>
pfSense book之2.4安装指南
查看>>
org.springframework.data.redis 一次连接获取特定key所有k-v(pipeline)
查看>>
[译稿]同步复制提议 2010-09
查看>>
windows 自动化目录大纲(各企业架构不一样,按需选择)
查看>>
我的友情链接
查看>>
【Visual C++】游戏开发笔记十三 游戏输入消息处理(二) 鼠标消息处理
查看>>
我的友情链接
查看>>
Java 使用 Redis
查看>>
JPA常用注解
查看>>
Java基础学习总结(1)——equals方法
查看>>
Maven学习总结(6)——Maven与Eclipse整合
查看>>
HTML5:理解head
查看>>
oracle
查看>>