基于vue的内部指令（上）

时间：2023-04-02 12:44:53 HTML

v-if、v-else-if、v-else和v-show条件指令v-if、v-else-if、v-else类似于JavaScript中的if、else-if，else，这三个指令根据表达式的值渲染/销毁DOM/组件。值得注意的是，v-else-if必须跟在v-if之后，v-else必须跟在v-else-if或v-if之后。如果想一次判断多个元素，可以将它们包裹在一个模板中，使用条件指令来操作外层模板。该模板不会包含在最终渲染结果中。

文本A

文本B

文本C

Vue在渲染元素时，出于效率考虑，会尽可能复用已有的元素，而不是比重新渲染。

切换

点击“切换”按钮，输入框的占位符发生变化，但切换输入内容时，内容依然存在，说明被复用了，只是占位符有被修改。如果不想被重用，需要给指定的元素添加一个键值，键值存在且唯一。

切换

v-show面试考点：v-show和v-if实现的视觉效果完全一样，但还是有本质区别，v-show改变了CSS显示的值，而v-if完全移除了元素。开发技巧：因为v-show是改变css属性，所以不管表达式是true还是false，都会被编译。v-if直接操作DOM的移除/渲染，所以v-if更适合不经常变化的场景，v-show适合经常变化的场景。列表循环指令v-for表达式需要和in结合使用，类似于v-for="iteminitems"数组

{{index}}-{{item}}