- Vue.js 2 Web Development Projects
- Guillaume Chau
- 217字
- 2021-07-02 22:34:28
Conditional templates with v-if
We need one last thing before testing our change; the main and preview panes shouldn't be displayed if no note is selected--it would not make sense for the user to have an empty editor and preview pane pointing to nothing, and it would make our code crash since selectedNote would be null. Thankfully, the v-if directive can dynamically take parts out of the template when we want. It works just like the JavaScript if keyword, with a condition.
In this example, the p element will not be in the DOM at all while the loading property is falsy:
<p v-if="loading"> Loading... </p>
There are also two other useful directives, v-else and v-else-if, that will work as you might have expected:
<p v-if="loading"> Loading... </p> <p v-else-if="processing"> Processing </p> <p v-else> Content here </p>
Back in our app, add the v-if="selectedNote" condition to both the main and preview panes so that they are not added to the DOM until a note is selected:
<!-- Main pane --> <section class="main" v-if="selectedNote"> ... </section> <!-- Preview pane --> <aside class="preview" v-if="selectedNote" v-html="notePreview"> </aside>
The repetition here is a bit unfortunate, but Vue has us covered. You can surround both elements with a special <template> tag that acts like braces in JavaScript:
<template v-if="selectedNote"> <!-- Main pane --> <section class="main"> ... </section> <!-- Preview pane --> <aside class="preview" v-html="notePreview"> </aside> </template>
At this point, the app should look like this:

The <template> tag will not be present in the DOM; it is more like a ghost element that is useful to regroup real elements together.
- 流量的秘密:Google Analytics網站分析與優化技巧(第2版)
- 零基礎搭建量化投資系統:以Python為工具
- HBase從入門到實戰
- Learning Neo4j 3.x(Second Edition)
- Full-Stack Vue.js 2 and Laravel 5
- SAP BusinessObjects Dashboards 4.1 Cookbook
- .NET 3.5編程
- PHP編程基礎與實例教程
- Learning jQuery(Fourth Edition)
- C#程序設計教程(第3版)
- LabVIEW虛擬儀器入門與測控應用100例
- QGIS 2 Cookbook
- Python自然語言理解:自然語言理解系統開發與應用實戰
- 川哥教你Spring Boot 2實戰
- Implementing Splunk(Second Edition)