條件語句:v-if v-else v-else-if v-show v-else 、v-else-if 必須跟在 v-if 或者 v-else-if之後。 1.v-if <body> <div id="app"> <p v-if="seen">seen=true現在你看到我了</p> <templa ...
條件語句:v-if v-else v-else-if v-show
v-else 、v-else-if 必須跟在 v-if 或者 v-else-if之後。
1.v-if
<body> <div id="app"> <p v-if="seen">seen=true現在你看到我了</p> <template v-if="ok"> <h1>ttttt</h1> <p>技術!</p> <p>哈哈哈,打字辛苦啊!!!</p> </template> </div> <script> new Vue({ el: '#app', data: { seen: true, ok: true } }) </script> </body>
2.v-else
隨機數:如若>0.5sorry 出現,否則not sorry出現
<body> <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> </body>
3.v-else-if
<body> <div id="app"> <div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C </div> <div v-else> Not A/B/C </div> </div> <script> new Vue({ el: '#app', data: { type: 'C' } }) </script> </body>
4. v-show
<body> <div id="app"> <h1 v-show="ok">Hello!</h1> </div> <script> new Vue({ el: '#app', data: { ok: true } }) </script> </body>