vue v-if 加key值的作用

 <div id="app"><template v-if="type === 'name'"><label>用户名：</label><input type="text" placeholder="请输入用户名..."></template><template v-else><label>邮箱：</label><input type="text" placeholder="请输入邮箱..."></template><button @click="handleToggleClick">切换输入类型</button></div><script src="vue.js"></script><script>var app = new Vue({el: '#app',data: {type: 'name'},methods: {handleToggleClick() {this.type = this.type === 'name' ? 'mail' : 'name';}}});

vue在渲染元素时，处于效率考虑，会尽量地复用已有的元素而非重新渲染，比如上面的实例，在，点击切换按钮，虽然DOM变了，但是之前在输入框键入的内容并没有改变，只是替换了placeholder的内容，说明input元素被复用了，如果不希望这样做，可以使用vue.js提供的key属性，它可以让你自己决定是否要复用元素，key的值必须是唯一的！！！，例如下面这样：

<div id="app"><template v-if="type === 'name'"><label>用户名：</label><input type="text" placeholder="请输入用户名..." key="neme-input"></template><template v-else><label>邮箱：</label><input type="text" placeholder="请输入邮箱..." key="mail-input"></template><button @click="handleToggleClick">切换输入类型</button></div><script src="vue.js"></script><script>var app = new Vue({el: '#app',data: {type: 'name'},methods: {handleToggleClick() {this.type = this.type === 'name' ? 'mail' : 'name';}}});

给input元素添加key，就不会复用了，切换类型时键入的内容也会被删除，不过label元素仍然是被复用的，因为没有添加key属性！

vue v-if 加key值的作用相关推荐

[vue] v-for循环中key有什么作用？
[vue] v-for循环中key有什么作用? 四个字: 性能优化,简述: 让vue在更新数据的时候可以更有针对性的个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢 ...
vue中一个页面key值重复解决
一个页面有两个组件需要添加:key,然而key重复会报错: <template><div><workservice :bCompany="bCompany&qu ...
vue中v-for为何要加key？index为何不推荐作为key
在使用vue组件的时候,我们经常会遇到v-for必须要加key值来举个例子进行说明吧! 不存在key的情况 <!--* @Author: angula* @Date: 2020-08-07 0 ...
vue v-for循环动态获取_快速、简洁讲明Vue中vfor循环key的作用
概要关于v-for中的key问题,其实这已经是个很常见的问题了,基本网上一搜一大把,面试的时候也常常会被问到,讲这个问题可能会设计DOM与虚拟DOM,还有很重要的Diff算法.传送门作用(重头戏) ...
vue知识点详解，Vue之v-prev、vue-virtual-scroll-list、alise、data动态添加数据、v-for中的key值等
1.没有vue语法的v-prev 给模版中静态html添加该指令,表示不需要重复编译.(可以极大的加快编译速度) 2.vue-virtual-scroll-list虚拟插件,用于长列表,几十万的数据也 ...
26.Vue列表渲染中key的作用与原理（内含虚拟DOM的对比算法详解）
目录 1.暴露问题,使用index作为key 2.使用唯一标识p.id作为key 3.不写key的配置 4.key的工作原理及虚拟DOM的对比算法 5.总结 25.Vue列表渲染_爱米酱的博客-CSD ...
工作158:vue里面为什么要加key
没有key <div id="app"><div><input type="text" v-model="name&qu ...
Vue中key属性的作用
Vue中key属性的作用在列表渲染时使用key属性使用key属性强制替换元素在列表渲染时使用key属性相信大多数Vue开发者接触到key属性的时候是使用v-for进行列表渲染的时候,如果不使用 ...
深入浅出 Vue 中的 key 值
key 的一个错误使用--使用 index 作为 key 不知道你在写 v-for 的时候,会不会直接使用 index 作为它的 key 值,是的,我承认我会,不得不说,这真的不是一个好习惯. 根据上 ...

vue v-if 加key值的作用

vue v-if 加key值的作用相关推荐

最新文章

热门文章