1. 程式人生 > >vue簡單邏輯判斷

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>