- 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.
- Mastering JavaScript Functional Programming
- 構建移動網站與APP:HTML 5移動開發入門與實戰(跨平臺移動開發叢書)
- C#完全自學教程
- Processing互動編程藝術
- Mastering macOS Programming
- Learning Material Design
- CRYENGINE Game Development Blueprints
- Java 9 Programming By Example
- Data Science Algorithms in a Week
- Python Deep Learning
- Learning D
- 軟件測試技術
- C++面向對象程序設計
- R語言數據分析從入門到實戰
- Java EE 程序設計