v-if与v-show的区别和v-for的列表渲染

1.v-if与v-show的区别和用法

1.v-if的用和注意事项

当我们需要做一个因为客户做出了不同的选择出现了不同的结果或者选择，但是这些结果或者选项又都是在我们同一个的页面的时候需要我们使用什么组件。

我们可以去Vue.js去了解一下这种类型的组件比如我们的v-if、v-else、v-else-if等。

我们可以看到使用v-if的时候需要给一个Boolean类型的变量这个判断值我们可以在script里面定义，在我们定义这个变量前需要线创建出一个ref来定义我们的变量。

我们在使用v-if的时候通常会跟我们的v-else一同使用，我们使用v-else的时候前面一定要有v-if，否则我们的页面会发生错误。

这个v-else相当于我们上一个v-if的判断值为true这个v-else则是false，反之上一个v-if是false那么这个v-else则是true。

我们通过页面的展示效果可以清楚的看的我们v-if的true和false为我们的判断值的结果区别，判断值为false则显示我们的v-else，反之则不显示我们的v-else。

我们在使用v-if和v-else的时候其中间不能有任何的组件或者内容否则我们的页面就会发生语法错误，空格的话是没有关系的。

我们在使用了v-if和v-else两个组件之间又添加了一个组件时，我们会发现我们的控制台先报出我们的页面发生了错误，到页面中查看我们的错误。

当我们去除掉了这个组件的时候错误也就解决了。

如果说我们的判断条件比较多的时候因为我们的v-if和v-else满足不了我们的需求时可以使用我们的v-else-if也就是我们不满足这个条件时再次判断时候满足下一个条件。

可以从运行结果看的我们的显示内容是与我们设置的值一致的。

我们不仅仅可以通过我们的v-if显示出组件内容也可以显示出不同的模块，不过显示模块需要我们使用template组件，这个template不是最外层的我们可以创建一个template来让不同的组件在同一级别。

使用template在包裹两组件的时候可以让其没有阶级的差异。

2.v-if和v-show的区别

我们是否显示出组件或者模块的时候不只有v-if还有我们的v-show它们的视觉效果是一致的，我们分别创建出两v-if和v-show来更加直观的看到我们的效果。

对于我们的v-show是有一个缺点的，那就是它并不是像v-if那样将其去除，而是打上了一个隐藏属性隐藏起来了，这样是会占用我们的网络从而发生卡顿，可以打开我们刚才的页面右击检查，来查看我们那个没有显示的v-show与另一个没有显示的v-if来做对比。

因为v-show还是会加载出我们不需要的内容，所以我们对于v-show的应用并没有v-if那么好用。

2.v-for的列表渲染

1.v-for的基本认知和用法

v-for列表渲染类似我们的for循环，原理也是通过我们的循环来实现，我们可以去Vue.js来查看我们的v-for列表渲染的一些知识和用法。比循环创建出多个组件或者标上组件处于第几个位置。​​​​​​

我们定义的时候除了数字之外还可以定义我们的数组。

我们现在下方的script里面定义一个数组需要我们使用ref来完成。

我们也可以根据我们的属性名来调用，可以在组件内部调用的时候在前面赋予一个名称来表达它是什么意思。

如果说是我们编译的小程序的话就会比较严谨，它会要求我们加上key也就是主键。

不过即使不添加也可以正常运行。

如果不会跳转页面的话可以点击上方有编译的提示旁边的下拉框。

这个时候我们需要先给我们的数组添加一个唯一列也就是我们的主键，因为key要求是唯一的值，所以不能重复，添加好了之后在组件内部使用：key引用我们的主键

这样我们的微信小程序就不会包key的错误了。

如果说我们需要循环一个组件并且不需要其他的组件可以使用template，因为循环我们的template不会出现没用的组件，在我们的Vue.js里面有介绍

还有其他更多的条件和注意可以去官网自行了解

连接：列表渲染 | Vue.js (vuejs.org)