Vue.js 條件語句

條件判斷

v-if

條件判斷使用 v-if 指令：

v-if 指令

在元素和 template 中使用 v-if 指令：

<div id="app"> <p v-if="seen">現(xiàn)在你看到我了</p> <template v-if="ok"> <h1>小白教程</h1> <p>行動(dòng)比思想更具有力量，加油追夢(mèng)人！</p> <p>哈哈哈，打字辛苦?。。?！</p> </template> </div> <script> new Vue({ el: '#app', data: { seen: true, ok: true } }) </script>

運(yùn)行代碼 ?

這里， v-if 指令將根據(jù)表達(dá)式 seen 的值(true 或 false )來決定是否插入 p 元素。

在字符串模板中，如 Handlebars ，我們得像這樣寫一個(gè)條件塊：

<!-- Handlebars 模板 -->
{{#if ok}}
  <h1>Yes</h1>
{{/if}}

v-else

可以用 v-else 指令給 v-if 添加一個(gè) "else" 塊：

v-else 指令

隨機(jī)生成一個(gè)數(shù)字，判斷是否大于0.5，然后輸出對(duì)應(yīng)信息：

<div id="app"> <div v-if="Math.random() > 0.5"> Sorry </div> <div v-else> Not sorry </div> </div> <script> new Vue({ el: '#app' }) </script>

運(yùn)行代碼 ?

v-else-if

v-else-if 在 2.1.0 新增，顧名思義，用作 v-if 的 else-if 塊?？梢枣?zhǔn)降亩啻问褂茫?/p>

v-else 指令

判斷 type 變量的值：

運(yùn)行代碼 ?

v-else 、v-else-if 必須跟在 v-if 或者 v-else-if之后。

v-show

我們也可以使用 v-show 指令來根據(jù)條件展示元素：

v-show 指令

<h1 v-show="ok">Hello!</h1>

運(yùn)行代碼 ?

上一篇：Vue.js 模板語法下一篇：Vue.js 循環(huán)語句