demo.html
1 <!DOCTYPE html> 2 <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-html="http://www.w3.org/1999/xhtml" 3 xmlns:v-on="http://www.w3.org/1999/xhtml"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Vue Demo</title> 7 <!--自選版本--> 8 <!--<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>--> 9 <!-- 開發環境版本，包含了有幫助的命令行警告 --> 10 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 11 <!-- 生產環境版本，優化了尺寸和速度 --> 12 <!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>--> 13 </head> 14 <body> 15 <div id="app"> 16 <div> 17 <h2>v-if、v-show舉例說明</h2> 18 <div> 19 <h3>v-if 示例</h3> 20 <div> 21 <button v-on:click="error=!error">網絡錯誤</button> 22 <button v-on:click="success=!success">網絡正常</button> 23 <p v-if="error">網絡錯誤：404</p> 24 <!--if條件滿足，else條件不會顯示--> 25 <p v-else-if="success">網絡正常：200</p> 26 <!--if和else都不滿足時顯示--> 27 <p v-else>未知</p> 28 </div> 29 </div> 30 <hr> 31 <div> 32 <h3>v-show 示例</h3> 33 <!--與if不同的是元素始終存在，只是是否展現--> 34 <div> 35 <button v-on:click="error=!error">網絡錯誤</button> 36 <button v-on:click="success=!success">網絡正常</button> 37 <p v-show="error">網絡錯誤：404</p> 38 <p v-show="success">網絡正常：200</p> 39 </div> 40 </div> 41 </div> 42 </div> 43 <script src="app.js"></script> 44 45 </body> 46 </html>
app.js
var app = new Vue({ el: '#app', data: { error: false, success: false, }, methods: {}, computed: {} })
截圖：
