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: {} })
截图：
