vue中的条件渲染和条件渲染

vue中的条件渲染

v-if v-show 控制模板标签是否在页面上显示

v-if 对应的js表达式为false：移除该标签dom节点

v-show 对应的js表达式为false：只控制了display属性为none，dom节点依然存在

v-show 性能好一点，因为不会去频繁的操作dom

v-if v-else 若v-if为true，v-else不显示，若v-if为false，v-else显示，但注意v-if和v-else必须紧贴着使用

v-if v-else-if v-else 必须连着写

vue在重新渲染页面的时候，会尽量尝试复用页面上已经存在的dom（input没有key时，不会被清空） 当给元素标签添加key值时，当两个key不同时，vue认为时两个唯一dom，会重新渲染不会复用，涉及diff算法

vue中的列表渲染

若有多个循环的列表同时渲染，可以使用 template 模板占位符，该标签不会被渲染到页面

列表渲染中，为了提高组件的复用性，可在每一项中绑定一个 key 值，建议使用每个数据对象中的唯一 id，不建议使用 index 值，index 值比较消耗性能。

如何改变数组，保证页面实时响应： 1.在 vue 里不能通过数组的下标值来改变数组，因为这个做法是没有响应式效果的，只能通过数组本身的7个方法（push/shift/pop/unshift/splice/sort/reverse）。 2.通过改变数组本身的引用实现（对象也是如此）。

• push() 在数组的最后面添加内容，成功后返回当前数组的长度

• pop() 删除数组的最后面一个元素，成功后返回删除元素的值

• shift() 删除数组的第一个元素，成功后返回删除元素的值

• unshift() 在数组的最前面添加一个元素，成功后返回数组的长度

• splice() 传入三个参数，splice(要删除的元素的索引，删除的个数，删除后在原位置替换的值)

• sort() 排序，成功后返回排序后的数组

• reserse() 倒序，成功后返回倒序后的数组

在 vue 2.x 中，在一个元素上同时使用v-if 和v-for时，v-for 会优先作用。

在 vue 3.x 中，v-if总是优先于 v-for 生效。

尽量避免在同一个元素上面同时使用v-if和v-for，建议使用计算属性替代。