vue简单逻辑判断

条件判断能否显示

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>vue的逻辑判断学习</title>
 6     <script type="text/javascript" src="./js/vue.js"></script>
 7     <script type="text/javascript">
 8 
 9     window.onload= function(){
10 
11         var app = new Vue({
12             el:"#a",
13             data:{
14                 //能否显示
15                 seen:true,
16                 seen1:false
17             }
18 
19         });
20 
21     }
22 
23     </script>
24 </head>
25 <body>
26     
27     <div id="a">
28         <!-- 使用vue的判断标签来显示或者隐藏元素 -->
29         <p v-if="seen">你能看见我</p>
30         <span v-if="seen1">你不能看见我</span>
31             <!-- 判断 if else 随机出现-->
32         <div v-if="Math.random() > 0.5">
33         现在你能看见我
34         </div>
35         <div v-else>
36         你现在看不见我
37         </div>
38 
39     </div>
40 </body>
41 </html>

猜你喜欢

转载自www.cnblogs.com/sunzhiqi/p/10101267.html
今日推荐