首页
技术小册
AIGC
面试刷题
技术文章
MAGENTO
云计算
视频课程
源码下载
PDF书籍
「涨薪秘籍」
登录
注册
4.1 v-if指令
4.1.1 基本用法
4.1.2 判断一组元素
4.2 v-else指令
4.3 v-else-if指令
4.4 v-show指令
4.5 如何选择v-if和v-show
5.1 遍历数组
5.1.1 基本用法
5.1.2 循环一组元素
5.1.3 更新数组
5.2 遍历对象
5.2.1 基本用法
5.2.2 向对象中添加响应式属性
5.3 遍历整数
5.4 key属性
6.1 计算属性
6.1.1 计算属性简介
6.1.2 计算属性的应用
6.1.3 计算属性的getter和setter
6.1.4 计算属性的缓存
6.2 监听属性
6.2.1 监听属性简介
6.2.2 监听属性的应用
6.2.3 监听对象
6.3 计算属性和监听属性的比较
7.1 class绑定
7.1.1 对象语法
7.1.2 数组语法
7.2 style绑定
7.2.1 对象语法
7.2.2 数组语法
8.1 监听事件
8.2 事件处理方法
8.2.1 绑定方法
8.2.2 使用事件对象
8.2.3 使用内联语句
8.3 修饰符的使用
8.3.1 事件修饰符
8.3.2 按键修饰符
9.1 文本框绑定
9.1.1 单行文本框
9.1.2 多行文本框
9.2 复选框绑定
9.2.1 单个复选框
9.2.2 多个复选框
9.3 单选按钮绑定
9.4 下拉列表框绑定
9.4.1 单选列表框
9.4.2 多选列表框
9.5 值绑定
9.5.1 单选按钮
9.5.2 复选框
9.5.3 下拉列表框
9.6 修饰符的使用
9.6.1 lazy
9.6.2 number
9.6.3 trim
当前位置:
首页>>
技术小册>>
Vue.js从入门到精通(二)
小册名称：Vue.js从入门到精通(二)
### 4.4 v-show指令 在Vue.js的广阔世界中，`v-show`指令是控制元素显示与隐藏的一个非常实用的工具。与`v-if`和`v-else-if`、`v-else`等条件渲染指令不同，`v-show`通过简单地切换元素的CSS属性`display`来实现显示与隐藏的效果，这意味着元素始终会被渲染并保留在DOM中，只是其可见性会基于表达式的真假值而变化。这种特性使得`v-show`在需要频繁切换元素显示状态时，相比`v-if`具有更高的性能优势，因为避免了DOM元素的重复创建和销毁。 #### 4.4.1 理解v-show的基本原理 `v-show`指令接收一个条件表达式作为参数。当表达式的值为真（truthy）时，元素将被设置为`display: block`（对于块级元素）或相应的默认值（对于内联元素），从而使元素可见。反之，如果表达式的值为假（falsy），则元素会被设置为`display: none`，使其不可见。 ```html <div id="app"> <p v-show="isVisible">这段文字会根据isVisible的值显示或隐藏。</p> </div> <script> new Vue({ el: '#app', data: { isVisible: true } }); </script> ``` 在上述例子中，`<p>`标签内的文本将根据`isVisible`数据属性的值显示或隐藏。 #### 4.4.2 v-show与v-if的比较 虽然`v-show`和`v-if`都用于条件性地渲染元素，但它们之间有着本质的区别，这些区别决定了在何种场景下应该选择哪个指令： - **渲染过程**：`v-if`是真正的条件渲染，因为它会确保在条件为假时元素及其子组件的销毁和重建。而`v-show`只是简单地切换元素的CSS属性`display`，元素始终保留在DOM中。 - **初始渲染**：如果条件在初始渲染时为假，`v-if`元素及其子组件将不会被渲染，直到条件变为真。`v-show`元素则会渲染并设置为`display: none`。 - **性能考虑**：对于需要频繁切换显示状态的元素，`v-show`提供了更高的性能，因为它避免了DOM的重新创建和销毁。然而，如果元素很少被切换，或者条件很少改变，使用`v-if`可能更合适，因为它可以确保不必要的元素不被加载到DOM中，减少页面大小和提高加载速度。 - **使用场景**：`v-if`更适合于条件不太可能改变的场景，如基于用户权限的组件渲染。而`v-show`则适用于频繁切换显示状态的场景，如折叠面板、选项卡等。 #### 4.4.3 实际应用场景 ##### 折叠面板 折叠面板是一个典型的`v-show`应用场景。当用户点击标题时，面板内容会根据点击事件切换显示或隐藏状态。使用`v-show`可以保持面板内容的DOM元素始终存在，仅通过改变其`display`属性来实现显示与隐藏，从而提高性能。 ```html <div id="app"> <button @click="togglePanel">点击我切换面板</button> <div v-show="isPanelVisible">这是折叠面板的内容</div> </div> <script> new Vue({ el: '#app', data: { isPanelVisible: false }, methods: { togglePanel() { this.isPanelVisible = !this.isPanelVisible; } } }); </script> ``` ##### 动态提示信息 在一些表单验证或用户交互场景中，可能会根据用户的输入或操作动态显示提示信息。这些信息可能不需要频繁地创建和销毁DOM元素，因此使用`v-show`来显示或隐藏这些提示信息是一个合理的选择。 ```html <div id="app"> <input type="text" v-model="inputValue" @blur="validateInput"> <div v-show="showTip" class="tip">请输入有效内容！</div> </div> <script> new Vue({ el: '#app', data: { inputValue: '', showTip: false }, methods: { validateInput() { if (!this.inputValue.trim()) { this.showTip = true; } else { this.showTip = false; } } } }); </script> ``` #### 4.4.4 注意事项 - **初始渲染**：由于`v-show`元素始终存在于DOM中，因此其初始样式（如`display: none`）可能会影响页面的布局。在设计页面时，应考虑到这一点，确保即使在元素隐藏时，页面的布局也不会受到太大影响。 - **性能考量**：虽然`v-show`在频繁切换显示状态时性能优于`v-if`，但在某些情况下（如元素非常大或包含大量子组件），即使元素被隐藏，也可能对页面性能造成一定影响。因此，在选择使用`v-show`时，应权衡其利弊。 - **CSS样式覆盖**：`v-show`通过改变元素的`display`属性来控制显示与隐藏。如果页面上有其他CSS规则也试图改变该元素的`display`属性，可能会与`v-show`产生冲突。因此，在使用`v-show`时，应确保没有其他CSS规则会意外地覆盖其效果。 综上所述，`v-show`指令是Vue.js中控制元素显示与隐藏的一个强大工具，它通过简单地切换元素的`display`属性来实现这一功能。了解`v-show`的基本原理、与`v-if`的比较、实际应用场景以及注意事项，将有助于我们更加灵活地运用这一指令，提升Vue.js应用的性能和用户体验。
上一篇：
4.3 v-else-if指令
下一篇：
4.5 如何选择v-if和v-show
该分类下的相关小册推荐：
TypeScript和Vue从入门到精通(二)
Vue.js从入门到精通(四)
VUE组件基础与实战
移动端开发指南
Vue源码完全解析
vuejs组件实例与底层原理精讲
Vue.js从入门到精通(三)
Vue原理与源码解析
TypeScript和Vue从入门到精通(五)
TypeScript和Vue从入门到精通(一)
TypeScript和Vue从入门到精通(四)
Vue.js从入门到精通(一)
