vue 用 key 管理可复用的元素
2018-01-10 17:22
330 查看
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>vue学习</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app1"> <template> <div v-if="loginType === 'username'"> <label>username</label> <input type="text" placeholder="enter your username" name="abc" key="eee"> <!--vue是高效复用的,input还是2个input,当时输入缓存还在,为了区别开,用关键字key--> </div> <div v-else> <label>passworld</label> <input type="password" placeholder="enter your password" name="dd" key="yyy"> <!--key 在浏览器控制台不显示哦,但能完美解决问题--> </div> </template> <button v-on:click="fun">点击切换</button> </div> <script> var foo = new Vue({ el: '#app1', data: { loginType: 'username', }, methods:{ fun:function(){ this.loginType =='username' ? this.loginType='password' : this.loginType='username'; } } }); </script> </body> </html>
相关文章推荐
- vue学习笔记一:用Key管理可复用元素
- vue学习笔记1——v-if和templete 条件渲染 使用 key 控制元素的可重用
- vue—webapp 解决点击遮罩层会触发界面上其他元素的click事件问题
- [置顶] Windows下Git多账号配置,同一电脑多个ssh-key的管理
- vue中获取当前点击元素
- vue中怎么获取元素
- vue实现某元素吸顶或固定位置显示(监听滚动事件)
- Vue2单一事件管理组件通信
- Vue-cli中的静态资源管理(src/assets和static/的区别)
- jquery之管理包装元素集合(find()方法与contains()方法,is()方法的使用)
- vue-router 组件实例被复用问题
- 高可复用软件体系结构的基础框架元素
- vue与自定义元素的关系
- 【Vue】删除数组元素,导致剩余元素被重新渲染
- Vue获取DOM元素样式 && 样式更改
- vue 中使用button等表单元素的注意点
- 一篇看懂vuejs的状态管理神器 vuex状态管理模式
- 有一个数组,数组中有13个元素,先将该数组进行分组,每3个元素为一组,分为若干组,最后用一个数组统一管理这些分组.(要动态创建数组)
- 企业文档管理系统的主要元素有哪些?
- Vue获取DOM元素样式和样式更改示例