使用方法
v-if ：
<h1 v-if="xkd">俠課島</h1> template 中配合 v-if 條件渲染一整組 ：
<template v-if="a"> <h1>Title</h1> <p>Paragraph one</p> <p>Paragraph two</p> </template> 使用v-else 指令來表示 v-if 的 else，v-else 元素必須緊跟在 v-if 或者 v-else-if元素的后面，否則它將不會被識別 ：
<h1 v-if="a">True</h1> <h1 v-else>FALSE</h1> 多次使用 v-if ：
<h1 v-if="color == 'red'" style="color: red;">紅</h1> <h1 v-else-if="color == 'green'" style="color: green;">綠</h1> <h1 v-else="color == 'blue'" style="color: blue;">藍 </h1> 如圖所示：
key 管理可復用的元素
通常會復用已有元素而不是從頭開始渲染（就近原則），key使得vue渲染速度會變得非常快。
下面是key的使用方法：
<body> <div id="main"> <template v-if="loginType === 'username'"> <label>用戶名</label> <input placeholder="請輸入用戶名" key="username-input" /> </template> <template v-else> <label>郵箱</label> <input placeholder="請輸入郵箱" key="email-input" /> </template> <input type="button" value="切換" v-on:click="changeType" /> </div> </body> <script> var vm = new vue({ el: '#main', data: { 'loginType': 'username' }, methods: { changeType: function() { if (this.loginType == 'username') { this.loginType = 'email'; } else { this.loginType = 'username'; } } } }) </script> 
資源搜索網站大全 https://www.renrenfan.com.cn 廣州VI設計公司https://www.houdianzi.com
v-show vs v-if
v-show：
<h1 v-show="xkd">Hello!</h1> v-show：比較簡單，不管初始條件是什么，元素總是會被渲染，並且只是簡單的基於css進行變換。初始渲染開銷較大。
v-if：有更高的切換開銷。
如果需要非常頻繁的切換，那么使用v-show比較好；如果在運行條件不太可能改變的情況下，則使用v-if較好。