vue v-if v-show

v-if 通过创建和销毁DOM来显示或者隐藏DOM元素

1. v-if可以和v-else-if和v-else一起搭配使用
2. v-if可以直接作用在template标签上

<template>
    <div class="home">
        <template v-if="false">//此时该template下面的内容都是不可见的
            <h1>hahah</h1>
        </template>
    </div>
</template>

3. v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
4. 类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。

v-show 通过控制DOM元素上的display属性进行显示隐藏的

注意，v-show 不支持 元素，也不支持 v-else

v-if 和 v-show

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

v-if 和 v-for官方建议不一起使用

因为v-for的优先级比v-if高，所以vue内部会先去循环全部数据，找到需要渲染的数据然后才进行渲染，比较耗性能。这种情况下我们可以使用computed属性先筛选我们需要展示的数据，然后在放到v-for中进行遍历展示，而且计算属性具有缓存的功能，只有对应属性变化才会重新计算否则都是从缓存中去取----以上内容都是vue2的但是在vue3中官网的解释是另外一种
在vue3中v-if的优先级要比v-for的优先级要高，如果此时你两者一起使用，并且v-if的判断内容又用到了v-for循环出来的内容此时会导致v-if失效，所以官方不建议一起使用-----以上是vue3官网解释的

如果想一起使用的话 可以将v-for移动到template标签上

<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo }}
</li>
//将上面代码变成下面的
<template v-for="todo in todos">
  <li v-if="!todo.isComplete">
    {{ todo }}
  </li>
</template>

v-for （把一个数组对应为一组元素）

可以用 in 也可以 of key最好加上以便它能跟踪每个节点的身份，从而重用和重新排序现有元素
tips:不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值。

        <ul>
            <li v-for="(item,index) in items" :key="index">{{ item .name }}</li><!--可以用in循环-->
        </ul>
        <ul>
            <li v-for="(item,index) of items" :key="index">{{ item .name }}</li><!--还可以用of循环-->
        </ul>

    data(){
        return {
            items:[
                {name:'勒布朗',age:36},
                {name:"戴维斯",age:26},
                {name:"威少",age:32},
                {name:"安东尼",age:37},
                {name:'霍华德',age:37}
            ],
        };
    },

还可以循环对象

• 第一个参数为对象中属性的值
• 第二个参数为对象中属性的属性名
• 第三个参数为循环的索引
  tips:在遍历对象时，会按 Object.keys() 的结果遍历，但是不能保证它在不同 JavaScript 引擎下的结果都一致。

        <ul>
            <li v-for="(val,key,index) of lbj" :key="index">{{ val }}:{{ key }}:{{ index }}</li><!--还可以用of循环-->
        </ul>
                    lbj:{
                name:'勒布朗',
                age:36,
                team:"laker",
            }

当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。

这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。

数组的变更方法(这些都会改变原数组)

push() 添加数据 返回值为数组的长度
pop() 删除最后一个数据 返回被删除的数据
shift() 删除第一个数据 返回被删除的数据
unshift() 可想数组前面添加一个或多个元素 返回数组的长度
splice()
第一个参数代表删除的起始位置负数就倒着来，第二个代表删除的数量为0就代表不删除，第三个代表添加的数据
sort((a,b)=>a-b) 排序
reverse() 反转数组中的元素

替换数组(不会影响原数组，返回新的数组)

filter()筛选
concat()连接
slice()
第一个参数：规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取，slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）
第二个参数：规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果该参数为负数， 则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素（不包含最后一个元素，也就是只有倒数第二个元素）