Vue模板指令——v-if、v-show、v-for的作用

v-if：控制DOM的存在与否

页面结果如下👇

上述例子功能：通过点击button实现对文字的显示和隐藏。
代码分析

• 在button上绑定一个点击事件，通过handleClick事件改变show属性的值为false或true。
• v-if判断：当show为false时，页面会将hello world标签从DOM里面删除。当show为true时，页面会将hello world标签重新添加到DOM里面。

v-show：控制DOM的显示与否

将上述例子中的 v-if 改为 v-show 同样可以实现hello world标签的显示与否。

v-if 和 v-show的区别：

v-if 对dom节点的操作结果如下：节点被移除

v-show 对dom节点的操作结果如下：节点被隐藏

• v-if 当它的指令为false的时候，会将标签直接从DOM里面移除。
• v-show当数据项指令为false时候，自动向div添加css为display：”none“的属性，此时该div块会被隐藏不会从节点中清除。

结论：如果需要频繁的对DOM标签进行显示和隐藏的操作， 用v-show性能更高，因为每一次的操作它不需要去销毁DOM再重新添加DOM。但如果这个标签的操作次数没有那么多的话，用v-if是个更好的选择。

v-for：数组循环展示

页面结果如下👇

上述例子功能：将list数组的内容通过循环输出到页面上。
对v-for添加一个名为key的属性

代码分析：

• 循环list数据列表，每一项的内容都会别暂时放到item里面，每一项内容在列表里面的位置（即下标）则会被存到index里面。
• 使用v-for的时候添加一个名为key值的属性，可提高渲染性能，避免数据混乱的情况。（key值要求每一项的值都不能重复，因此可用数组的下标作为key值）
• key值的内容是不能重复的，用index来作为item数据的下标可避免key值出现重复的情况，但是如果数据需要不断做刷新处理，用index还是会出现问题。