vue重用机制:

也叫惰性机制 , vue使用v-if进行标签的切换时, 如果将要销毁和将要创建标签时同一种标签, 那么vue不会销毁和新建,而是把原有的标签重置属性和样式后直接拿来用, 可能造成输入框内容被保留下来

怎么避免vue的重用机制?

  1.         在需要创建和销毁的标签上分别添加key属性, key值相同则重用, key值不同则不重用,  默认不加key属性,值是相同的
  1. <body>
  2.     <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
  3.     <div id='myApp'>
  4.         <button @click="btnClick">切换登录方式</button>
  5.         <button @click="()=>{login=!login}">事件函数可以用匿名函数直接实现</button>
  6.         <div v-if="login">
  7.             <input type="text" placeholder="请输入账号信息">
  8.             <input key="pas" type="password" placeholder="请输入密码信息">
  9.         </div>
  10.         <div v-else>
  11.             <input type="text" placeholder="请输入手机号信息">
  12.             <input key="code" type="text" placeholder="请输入验证码信息"> 
  13.             <textarea name="" id="" cols="30" rows="10"></textarea>
  14.         </div>
  15.         <!-- 以上使用v-if控制标签切换时,发现标签并没有严格执行创建和销毁(因为切换后输入框的数据还在,说明输入框并未销毁), 由于vue的重用机制造成
  17.         vue重用机制: 也叫惰性机制 , vue使用v-if进行标签的切换时, 如果将要销毁和将要创建标签时同一种标签, 那么vue不会销毁和新建,而是把原有的标签重置属性和样式后直接拿来用, 可能造成输入框内容被保留下来  
  19.         怎么避免vue的重用机制?
  20.             在需要创建和销毁的标签上分别添加key属性, key值相同则重用, key值不同则不重用,  默认不加key属性,值是相同的
  21.         -->
  23.         <!-- v-for循环时,建议添加属性key,保证key值都不同, 避免重用机制造成渲染异常 -->
  24.         <div v-for="item,i in arr" :key="i">{{item.age}}</div>
  28.     </div>
  29.     <script>
  30.         new Vue({
  31.             el: '#myApp',
  32.             data: {
  33.                 login: true,
  34.                 arr: [
  35.                     {age:10},
  36.                     {age:20},
  37.                     {age:30},
  38.                     {age:20}
  39.                 ]
  40.             },
  41.             methods: {
  42.                 btnClick(){
  43.                     this.login = !this.login;
  44.                 }
  45.             }
  46.         })
  47.     </script>
  48. </body>