条件渲染

v-show —-> 调整display的状态
v-if —> vue 渲不渲染问题
v-else-if —-> v-else
v-else后面的条件不判断
v-if和v-else-if和v-else中间不能被打断
v-show不能用在template因为template不会渲染为标签

  1. <template v-if="n ===1">
  2.     <h1>ss</h1>
  3.   ....
  4. </template>

列表渲染

遍历数组类型[ … ] ，

  1. <div id ="app">
  2.     <ul>
  3.       <li v-for="(item,index) in persons" :key="index">
  4.         id：{{item.id}}<br>
  5.             name：{{item.name}}<br>
  6.       age：{{item.age}}<br>
  7.     </li>
  8.     </ul>
  9. </div>
  10. data(){
  11.     return{
  12.       persons:[
  13.       {
  14.           name:"张三",
  15.         id:001,
  16.         age:18
  17.       },
  18.       {
  19.           name:"张三",
  20.         id:001,
  21.         age:18
  22.       },
  23.           {
  24.           name:"张三",
  25.         id:001,
  26.         age:18
  27.       }
  28.     ]
  29.   }
  30. }

同时也可以遍历对象类型{ … }

遍历出来的item是键，index是键值

字符串

遍历出来的item是字符，index是在的下标，可以把字符串理解成数组

直接for循环形式指定次数

v-for=”item in 10” //循环10次

key的原理和作用

diff算法的虚拟dom依赖与kay对比更新
只更新修改的内容，而标签一样的就不更新直接调用真实dom的旧数据渲染
虚拟dom中key的作用
key是虚拟dom对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟dom】，随后Vue进行【新虚拟dom】与【旧虚拟dom】的差异比较
比较规则
旧虚拟dom中找到了与新虚拟dom相同的key
若虚拟dom中内容没变，直接使用之前的真实dom
若虚拟dom中的内容变了，则生成新的真实dom，随后替换掉页面中之前的真实dom
旧虚拟dom中未找到与新虚拟dom相同的key
创建新的真实dom，随后渲染到页面
用index作为key可能会引发的问题
若对数据进行：逆序添加，逆序删除等破坏顺序的操作
会产生没有必要的真实dom更新 == > 界面效果没问题，但效率低
如果结构中还包含输入类的dom：
会产生错误的dom更新 == > 界面有问题
开发中如何选择key
最好使用每条数据中的唯一标识作为key，比如id，手机号，学号等等
如果不存在对数据的逆序添加，逆序删除等破环顺序的操作，仅用于渲染列表展示，使用index是没有问题的