vue中key的作用 v-for里警告 v-if的复用

vue总是会复用页面上已经存在的dom,区别的方法是加上key就可以,还设有v-for时候的警告也是如此key的作用是区别这条跟那条的。<body>
    <div id="app">
       <div v-if=‘flag%2‘>
           用户名:<input type="text"> // 用户名:<input type="text" key=‘password‘> 
</div> <div v-else> password: <input type="password"> 当这个显示的时候, vue会拿 上面用户名那个input </div> <button @click=‘changeFlage‘>click</button> </div> <script src="../vue.js"></script> <script> var vm = new Vue({ el: ‘#app‘, data: { flag: 1 }, methods: { changeFlage: function(){ this.flag ++;  } } }) </script> </body>

原文地址:https://www.cnblogs.com/dangdanghepingping/p/10243614.html

时间: 2024-10-03 17:58:40

vue中key的作用 v-for里警告 v-if的复用的相关文章

React中key的作用

对于React中key的作用,官方没有给出详细的解读,只提到在List中需要给key赋值来区分每一条记录,http://blog.csdn.net/code_for_free/article/details/50514259里讲解了key的使用场景, http://taobaofed.org/blog/2016/08/24/react-key/从三方面讲了List组件中key存在的原因和List之外使用key作为trick简化代码逻辑,本文以List中新增元素为例,从List子组件生命周期函数的

Vue中 key keep-alive的实现原理

vue2.0提供了一个keep-alive组件用来缓存组件,避免多次加载相应的组件,减少性能消耗 keep-aliv是Vue.js的一个内置组件.它能够不活动的组件实例保存在内存中,而不是直接将其销毁,它是一个抽象组件,不会被渲染到真实DOM中,也不会出现在父组件链中. 它有两个生命周期: activated: keep-alive组件激活时调用 deactivated: keep-alive组件停用时调用 它提供了include与exclude两个属性,允许组件有条件地进行缓存. keep-a

vue中nextTick的作用

参数: 1.{Function} [callback] 2.{Object} [context] 用法: 在下次DOM更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的DOM. // 修改数据 vm.msg = 'Hello' // DOM 还没有更新 Vue.nextTick(function () { // DOM 更新了 }) // 作为一个 Promise 使用 (2.1.0 起新增,详见接下来的提示) Vue.nextTick() .then(function

vue中moudles的作用及使用方法

1.作用:vuex允许把store分割为模块,每一个模块都有自己的state,actions,getters,mutations甚至是嵌套一些子模块,从上到下进行同样方式的分割 在文件src中创建一个文件夹store,包含index.js就是store.js ,然后再创建文件夹modules文件夹,此文件夹中放的就是模块, import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) import menu from './modules

vue 中的 key 有什么作用?

key 是为 Vue 中 vnode 的唯一标记,通过这个 key,我们的 diff 操作可以更准确.更快速. Vue 的 diff 过程可以概括为: oldCh 和 newCh 各有两个头尾的变量 oldStartIndex.oldEndIndex 和 newStartIndex.newEndIndex,它们会在新节点和旧节点会进行两两对比 即一共有4种比较方式:newStartIndex 和oldStartIndex .newEndIndex 和 oldEndIndex .newStartI

【react】---react中key值的作用

一.React中key值得作用 react中的key属性,它是一个特殊的属性,它是出现不是给开发者用的,而是给React自己使用,有了key属性后,就可以与组件建立了一种对应关系,简单说,react利用key来识别组件,他是一种身份标识,就像每个人有一个身份证来做辨识一样.每个key 对应一个组件,相同的key react认为是同一个组件,这样后续相同的key对应组件都不会被创建 key值相同 如果两个元素是相同的key,且满足第一点元素类型相同, 若元素属性有所变化,则React只更新组件对应

横冲直撞vue(第三篇):vue中template的三种写法、v-bind、v-on、更新元素的指令v-text与v-html、条件渲染指令v-if 与v-show、v-for

一.vue中template的三种写法 第一种(字符串模板写法): 直接写在vue构造器里,这种写法比较直观,适用于html代码不多的场景,但是如果模板里html代码太多,不便于维护,不建议这么写. <body> <div id="app"></div> <script src="./lib/vue.js"></script> <script type="text/javascript&qu

Vue中watch-computed-methods

Vue中watch-computed-methods watch 作用 用来监听data中定义的数据,当data中定义的数据发生了变化,那么watch中的key就会触发 watch是一个对象 watch: {} watch中可以设置多个类型的键值 使用方式( 重点 ) 方法 watch: { fn () {} } 对象: ( 深度监听 ) watch: { fn: { handler(){}, deep: true } } ## 计算属性 1. 使用方式 - 里面存放方法 ```javascri

图解vue中 v-for 的 :key 的作用,虚拟dom Diff算法

其实不只是vue,react中在执行列表渲染时也会要求给每个组件添加上key这个属性. 要解释key的作用,不得不先介绍一下虚拟DOM的Diff算法了. 我们知道,vue和react都实现了一套虚拟DOM,使我们可以不直接操作DOM元素,只操作数据便可以重新渲染页面.而隐藏在背后的原理便是其高效的Diff算法. vue和react的虚拟DOM的Diff算法大致相同,其核心是基于两个简单的假设: 1.两个相同的组件产生类似的DOM结构,不同的组件产生不同的DOM结构. 2.同一层级的一组节点,他们