Vue之v-for、v-show使用举例

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/[email protected]/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: {}
})

截图：

Vue之v-for、v-show使用举例

猜你喜欢