mirror of
https://github.com/fofolee/uTools-Manuals.git
synced 2025-06-08 23:14:06 +08:00
147 lines
13 KiB
HTML
147 lines
13 KiB
HTML
<div class="content guide with-sidebar conditional-guide">
|
||
<h1>条件渲染</h1>
|
||
<h2 id="v-if"><a class="headerlink" href="#v-if" title="v-if"></a><code>v-if</code></h2><p><code>v-if</code> 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。</p>
|
||
<pre><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"awesome"</span>></span>Vue is awesome!<span class="hljs-tag"></<span class="hljs-name">h1</span>></span></code></pre>
|
||
<p>也可以用 <code>v-else</code> 添加一个“else 块”：</p>
|
||
<pre><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"awesome"</span>></span>Vue is awesome!<span class="hljs-tag"></<span class="hljs-name">h1</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">v-else</span>></span>Oh no 😢<span class="hljs-tag"></<span class="hljs-name">h1</span>></span></code></pre>
|
||
<h3 id="在-lt-template-gt-元素上使用-v-if-条件渲染分组"><a class="headerlink" href="#在-lt-template-gt-元素上使用-v-if-条件渲染分组" title="在 <template> 元素上使用 v-if 条件渲染分组"></a>在 <code><template></code> 元素上使用 <code>v-if</code> 条件渲染分组</h3><p>因为 <code>v-if</code> 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个 <code><template></code> 元素当做不可见的包裹元素，并在上面使用 <code>v-if</code>。最终的渲染结果将不包含 <code><template></code> 元素。</p>
|
||
<pre><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">template</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"ok"</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">h1</span>></span>Title<span class="hljs-tag"></<span class="hljs-name">h1</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">p</span>></span>Paragraph 1<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">p</span>></span>Paragraph 2<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
|
||
<span class="hljs-tag"></<span class="hljs-name">template</span>></span></code></pre>
|
||
<h3 id="v-else"><a class="headerlink" href="#v-else" title="v-else"></a><code>v-else</code></h3><p>你可以使用 <code>v-else</code> 指令来表示 <code>v-if</code> 的“else 块”：</p>
|
||
<pre><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"Math.random() > 0.5"</span>></span>
|
||
Now you see me
|
||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">v-else</span>></span>
|
||
Now you don't
|
||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
||
<p><code>v-else</code> 元素必须紧跟在带 <code>v-if</code> 或者 <code>v-else-if</code> 的元素的后面，否则它将不会被识别。</p>
|
||
<h3 id="v-else-if"><a class="headerlink" href="#v-else-if" title="v-else-if"></a><code>v-else-if</code></h3><blockquote>
|
||
<p>2.1.0 新增</p>
|
||
</blockquote>
|
||
<p><code>v-else-if</code>，顾名思义，充当 <code>v-if</code> 的“else-if 块”，可以连续使用：</p>
|
||
<pre><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"type === 'A'"</span>></span>
|
||
A
|
||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">v-else-if</span>=<span class="hljs-string">"type === 'B'"</span>></span>
|
||
B
|
||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">v-else-if</span>=<span class="hljs-string">"type === 'C'"</span>></span>
|
||
C
|
||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">v-else</span>></span>
|
||
Not A/B/C
|
||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
||
<p>类似于 <code>v-else</code>，<code>v-else-if</code> 也必须紧跟在带 <code>v-if</code> 或者 <code>v-else-if</code> 的元素之后。</p>
|
||
<h3 id="用-key-管理可复用的元素"><a class="headerlink" href="#用-key-管理可复用的元素" title="用 key 管理可复用的元素"></a>用 <code>key</code> 管理可复用的元素</h3><p>Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外，还有其它一些好处。例如，如果你允许用户在不同的登录方式之间切换：</p>
|
||
<pre><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">template</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"loginType === 'username'"</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">label</span>></span>Username<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Enter your username"</span>></span>
|
||
<span class="hljs-tag"></<span class="hljs-name">template</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">template</span> <span class="hljs-attr">v-else</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">label</span>></span>Email<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Enter your email address"</span>></span>
|
||
<span class="hljs-tag"></<span class="hljs-name">template</span>></span></code></pre>
|
||
<p>那么在上面的代码中切换 <code>loginType</code> 将不会清除用户已经输入的内容。因为两个模板使用了相同的元素，<code><input></code> 不会被替换掉——仅仅是替换了它的 <code>placeholder</code>。</p>
|
||
<p>自己动手试一试，在输入框中输入一些文本，然后按下切换按钮：</p>
|
||
<div class="demo" id="no-key-example">
|
||
<div>
|
||
<template v-if="loginType === 'username'">
|
||
<label>Username</label>
|
||
<input placeholder="Enter your username"/>
|
||
</template>
|
||
<template v-else="">
|
||
<label>Email</label>
|
||
<input placeholder="Enter your email address"/>
|
||
</template>
|
||
</div>
|
||
<button>Toggle login type</button>
|
||
</div>
|
||
<script>
|
||
new Vue({
|
||
el: '#no-key-example',
|
||
data: {
|
||
loginType: 'username'
|
||
},
|
||
methods: {
|
||
toggleLoginType: function () {
|
||
return this.loginType = this.loginType === 'username' ? 'email' : 'username'
|
||
}
|
||
}
|
||
})
|
||
</script>
|
||
<p>这样也不总是符合实际需求，所以 Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 <code>key</code> 属性即可：</p>
|
||
<pre><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">template</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"loginType === 'username'"</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">label</span>></span>Username<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Enter your username"</span> <span class="hljs-attr">key</span>=<span class="hljs-string">"username-input"</span>></span>
|
||
<span class="hljs-tag"></<span class="hljs-name">template</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">template</span> <span class="hljs-attr">v-else</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">label</span>></span>Email<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Enter your email address"</span> <span class="hljs-attr">key</span>=<span class="hljs-string">"email-input"</span>></span>
|
||
<span class="hljs-tag"></<span class="hljs-name">template</span>></span></code></pre>
|
||
<p>现在，每次切换时，输入框都将被重新渲染。请看：</p>
|
||
<div class="demo" id="key-example">
|
||
<div>
|
||
<template v-if="loginType === 'username'">
|
||
<label>Username</label>
|
||
<input key="username-input" placeholder="Enter your username"/>
|
||
</template>
|
||
<template v-else="">
|
||
<label>Email</label>
|
||
<input key="email-input" placeholder="Enter your email address"/>
|
||
</template>
|
||
</div>
|
||
<button>Toggle login type</button>
|
||
</div>
|
||
<script>
|
||
new Vue({
|
||
el: '#key-example',
|
||
data: {
|
||
loginType: 'username'
|
||
},
|
||
methods: {
|
||
toggleLoginType: function () {
|
||
return this.loginType = this.loginType === 'username' ? 'email' : 'username'
|
||
}
|
||
}
|
||
})
|
||
</script>
|
||
<p>注意，<code><label></code> 元素仍然会被高效地复用，因为它们没有添加 <code>key</code> 属性。</p>
|
||
<h2 id="v-show"><a class="headerlink" href="#v-show" title="v-show"></a><code>v-show</code></h2><p>另一个用于根据条件展示元素的选项是 <code>v-show</code> 指令。用法大致一样：</p>
|
||
<pre><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">v-show</span>=<span class="hljs-string">"ok"</span>></span>Hello!<span class="hljs-tag"></<span class="hljs-name">h1</span>></span></code></pre>
|
||
<p>不同的是带有 <code>v-show</code> 的元素始终会被渲染并保留在 DOM 中。<code>v-show</code> 只是简单地切换元素的 CSS 属性 <code>display</code>。</p>
|
||
<p class="tip">注意，<code>v-show</code> 不支持 <code><template></code> 元素，也不支持 <code>v-else</code>。</p>
|
||
<h2 id="v-if-vs-v-show"><a class="headerlink" href="#v-if-vs-v-show" title="v-if vs v-show"></a><code>v-if</code> vs <code>v-show</code></h2><p><code>v-if</code> 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。</p>
|
||
<p><code>v-if</code> 也是<strong>惰性的</strong>：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。</p>
|
||
<p>相比之下，<code>v-show</code> 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。</p>
|
||
<p>一般来说，<code>v-if</code> 有更高的切换开销，而 <code>v-show</code> 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 <code>v-show</code> 较好；如果在运行时条件很少改变，则使用 <code>v-if</code> 较好。</p>
|
||
<h2 id="v-if-与-v-for-一起使用"><a class="headerlink" href="#v-if-与-v-for-一起使用" title="v-if 与 v-for 一起使用"></a><code>v-if</code> 与 <code>v-for</code> 一起使用</h2><p class="tip"><strong>不推荐</strong>同时使用 <code>v-if</code> 和 <code>v-for</code>。请查阅<a href="/v2/style-guide/#避免-v-if-和-v-for-用在一起-必要">风格指南</a>以获取更多信息。</p>
|
||
<p>当 <code>v-if</code> 与 <code>v-for</code> 一起使用时，<code>v-for</code> 具有比 <code>v-if</code> 更高的优先级。请查阅<a href="list.html#v-for-with-v-if">列表渲染指南</a> 以获取详细信息。</p>
|
||
<div class="guide-links">
|
||
<span>← <a href="class-and-style.html">Class 与 Style 绑定</a></span>
|
||
<span style="float: right;"><a href="list.html">列表渲染</a> →</span>
|
||
</div>
|
||
<div class="footer">
|
||
<script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
|
||
<div class="bsa-cpc"></div>
|
||
<script>
|
||
(function(){
|
||
if(typeof _bsa !== 'undefined' && _bsa) {
|
||
_bsa.init('default', 'CKYD62QM', 'placement:vuejsorg', {
|
||
target: '.bsa-cpc',
|
||
align: 'horizontal',
|
||
disable_css: 'true'
|
||
});
|
||
}
|
||
})();
|
||
</script>
|
||
|
||
发现错误？想参与编辑？
|
||
<a href="https://github.com/vuejs/cn.vuejs.org/blob/master/srcconditional.md" target="_blank">
|
||
在 GitHub 上编辑此页！
|
||
</a>
|
||
</div>
|
||
</div> |