Vue.js 3开发基础与实战课件 第二章 Vue开发基础.pptVIP

条件渲染2．v-show除了v-if指令，还可以使用v-show指令来按条件显示DOM元素。其用法和v-if基本上一致。与v-if指令不同的是，v-show指令是控制元素的隐藏和显示，而不是将其从页面中删除或添加，v-show和v-if的具体区别如下：v-if是按照表达式结果真假是否选择渲染，而v-show不管表达式结果真假都进行渲染，然后通过CSSdisplay属性进行切换显示和隐藏。v-if是真正意义的按条件渲染，它在切换时，条件区块内的事件监听会正常执行，子组件也会被销毁与重建。从开销来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。如果需要频繁切换显示和隐藏，使用v-show较好；如果在运行时绑定条件很少改变，则v-if会更合适。v-if有更好的结构结合，支持与v-else-if和v-else结合,而v-show不支持。v-if支持在template标签上使用，v-show也不支持。Vue实例12模板语法3条件渲染4列表渲染5计算属性-computed6侦听器-watch7数据绑定8事件处理9案例：图书管理页面列表渲染在网页开发中，我们经常需要展示一些列表结构，如商品列表、热门新闻列表、用户列表等。这些列表中的元素结构都是相同的，只是数据有所不同。Vue提供了v-f