Vue之條件渲染
阿新 • • 發佈：2021-09-03
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>條件渲染</title> 9 </世界不會因為你的疲憊,而停下它的腳步head> 10 11 <body> 12 <div id="div"> 13 <!-- 判斷num的值對3取餘,餘數為0顯示div1,餘數是1顯示div2,餘數為2顯示div3 --> 14 <div v-if="num % 3 == 0">div1</div> 15 <div v-else-if="num % 3 == 1">div2</div> 16 <div v-else="num % 3 == 2">div3</div> 17 18 <div v-show="flag">div4</div> 19 </div> 20 </body> 21 <script src="../js/vue.js"></script> 22 <script> 23 new Vue({ 24 25 el: "#div", 26 data: { 27 num: 1, 28 flag: true 29 } 30 }); 31 </script> 32 33 </html>