首页
技术小册
AIGC
面试刷题
技术文章
MAGENTO
云计算
视频课程
源码下载
PDF书籍
「涨薪秘籍」
登录
注册
第 4 章 TypeScript编程进阶
4.1 使用泛型进行编程
4.1.1 泛型的简单使用
4.1.2 在类和接口中使用泛型
4.1.3 对泛型进行约束
4.2 迭代器与装饰器
4.2.1 关于迭代器
4.2.2 关于装饰器
4.2.3 装饰器的组合与装饰器工厂
4.3 命名空间与模块
4.3.1 命名空间的应用
4.3.2 使用模块
第 5 章 Vue中的模板
5.1 模板基础
5.1.1 模板插值
5.1.2 模板指令
5.2 条件渲染
5.2.1 使用v-if指令进行条件渲染
5.2.2 使用v-show指令进行条件渲染
5.3 循环渲染
5.3.1 v-for指令的使用方法
5.3.2 v-for指令的高级用法
5.4 范例：待办任务列表
5.4.1 使用HTML搭建应用框架结构
5.4.2 实现待办任务列表逻辑
第 6 章 Vue组件的属性和方法
6.1 属性与方法基础
6.1.1 属性基础
6.1.2 方法基础
6.2 计算属性和侦听器
6.2.1 计算属性
6.2.2 使用计算属或函数
6.2.3 计算属性的赋值
6.2.4 属性侦听器
6.3 进行函数限流
6.3.1 手动实现一个简易的限流函数
6.3.2 使用Lodash库进行函数限流
6.4 表单数据的双向绑定
6.4.1 文本输入框
6.4.2 多行文本输入区域
6.4.3 复选框与单选框
6.4.4 选择列表
6.4.5 两个常用的修饰符
6.5 样式绑定
6.5.1 为HTML标签绑定class属性
6.5.2 绑定内联样式
6.6 范例：用户注册页面
6.6.1 搭建用户注册页面
6.6.2 实现注册页面的用户交互
当前位置:
首页>>
技术小册>>
TypeScript和Vue从入门到精通(二)
小册名称：TypeScript和Vue从入门到精通(二)
### 5.2.1 使用`v-if`指令进行条件渲染 在Vue.js中，条件渲染是一种根据表达式的真假值来决定是否渲染元素或组件的技术。Vue提供了几种指令来帮助我们实现这一功能，其中`v-if`是最直接且常用的一种方式。在本章中，我们将深入探讨`v-if`指令的用法、原理、以及与`v-else`、`v-else-if`等指令的联合使用，从而全面掌握Vue中的条件渲染技术。 #### 5.2.1.1 理解`v-if`指令 `v-if`指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值(`true`)时被渲染。如果表达式为假值(`false`)，则对应的元素及其子元素都不会被渲染到DOM中，并且它们也不会参与DOM的更新。这种机制非常高效，因为它避免了不必要的DOM操作，有助于提升应用的性能。 **基本用法**： ```html <template> <div> <p v-if="isVisible">你看到了这段文字，因为isVisible为true。</p> </div> </template> <script> export default { data() { return { isVisible: true, }; }, }; </script> ``` 在上述例子中，当`isVisible`为`true`时，`<p>`标签内的内容会被渲染到页面上；如果`isVisible`变为`false`，则`<p>`标签及其内容会从DOM中移除。 #### 5.2.1.2 `v-if`与`v-else`、`v-else-if`的联合使用 为了处理更复杂的条件逻辑，Vue允许`v-if`与`v-else`、`v-else-if`一起使用，形成类似JavaScript中的`if-else`或`if-else if-else`结构。 **示例**： ```html <template> <div> <p v-if="score >= 90">优秀</p> <p v-else-if="score >= 60">及格</p> <p v-else>不及格</p> </div> </template> <script> export default { data() { return { score: 75, }; }, }; </script> ``` 在这个例子中，根据`score`的值，页面将显示不同的评价。如果`score`大于等于90，则显示“优秀”；如果`score`在60到89之间，则显示“及格”（这里由于`v-else-if`的使用）；如果`score`小于60，则显示“不及格”（由`v-else`捕获）。 #### 5.2.1.3 `v-if`的懒加载特性 值得注意的是，`v-if`是“真正”的条件渲染，因为它会确保在条件为假时相应元素及其子元素不会被添加到DOM中，也不会参与DOM的更新。这种“懒加载”的特性在处理大量数据或复杂组件时尤其有用，因为它可以减少初始加载时的DOM元素数量，提高页面加载速度和性能。 与之相对的是`v-show`指令，它虽然也能根据条件显示或隐藏元素，但无论条件真假，元素都会被渲染到DOM中，只是通过CSS的`display`属性来控制其显示或隐藏。这意味着`v-show`元素始终会参与DOM的更新，但在频繁切换显示状态时可能比`v-if`更高效，因为避免了DOM的添加和删除操作。 #### 5.2.1.4 `v-if`与计算属性、侦听器的结合使用 在实际开发中，`v-if`经常与计算属性（computed properties）和侦听器（watchers）结合使用，以实现更复杂的逻辑判断和响应式数据变化。 - **计算属性**：当你需要根据组件的响应式数据计算得到一个新的值时，可以使用计算属性。如果`v-if`的表达式依赖于计算属性的结果，那么当计算属性的依赖项发生变化时，Vue会自动重新计算该属性的值，并可能导致`v-if`条件的变化，从而触发条件渲染。 - **侦听器**：侦听器允许你执行异步操作或开销较大的操作，而这些操作不适合在模板或计算属性中直接执行。你可以通过侦听器来监听某个响应式数据的变化，并在变化时执行特定的逻辑，比如根据条件动态地修改`v-if`所依赖的数据。 #### 5.2.1.5 注意事项 - **避免在`v-if`中使用复杂的表达式**：虽然Vue允许在`v-if`中直接使用表达式，但为了避免模板难以理解和维护，建议将复杂的逻辑移至计算属性或方法中。 - **`v-if`与`v-for`的优先级**：当`v-if`和`v-for`同时出现在一个元素上时，`v-for`的优先级高于`v-if`。这意味着，如果希望基于过滤后的列表进行渲染，应当先使用计算属性来过滤列表，然后再在过滤后的列表上使用`v-for`。 - **性能考量**：虽然`v-if`提供了高效的条件渲染机制，但在某些情况下（如列表渲染中频繁切换显示/隐藏），可能需要考虑使用`v-show`或其他方法来优化性能。 #### 结语 `v-if`指令是Vue中用于条件渲染的核心工具之一，通过它，我们可以根据组件的状态或数据的变化来控制DOM的渲染。通过结合计算属性、侦听器以及合理的逻辑设计，我们可以构建出既高效又易于维护的Vue应用。掌握`v-if`及其相关指令的使用，是成为一名优秀Vue开发者的必经之路。
上一篇：
5.2 条件渲染
下一篇：
5.2.2 使用v-show指令进行条件渲染
该分类下的相关小册推荐：
Vue原理与源码解析
Vue.js从入门到精通(三)
Vue.js从入门到精通(四)
Vue.js从入门到精通(二)
Vue3技术解密
TypeScript和Vue从入门到精通(四)
TypeScript和Vue从入门到精通(一)
Vue面试指南
TypeScript和Vue从入门到精通(五)
TypeScript和Vue从入门到精通(三)
Vue源码完全解析
移动端开发指南
