This article mainly helps everyone to simply understand Vue conditional rendering. What is Vue conditional rendering, it has certain reference value. Interested friends can refer to it
1. v-if Display a single element
Note that else can only follow v-if or v-show
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue条件渲染</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <p class="test"> <p v-if="isDisplay"> <!--if...else... 单个元素--> 显示我1 </p> <p v-else> 显示我2 </p> </p> <script type="text/javascript"> var myVue =new Vue({ el: ".test", data: { isDisplay: 1 } }) </script> </body> </html>
The output result is: show me 1
2. v-if displays multiple elements and needs to be matched with
Note that else can only be followed by After v-if or v-show
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue条件渲染</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <p class="test"> <template v-if="isDisplay"> <!--if...else... 用template实现多个元素--> <p>显示我1</p> <p>显示我11</p> <p>显示我12</p> <p>显示我13</p> </template> <p v-else> 显示我2 </p> </p> <script type="text/javascript"> var myVue =new Vue({ el: ".test", data: { isDisplay: 1 } }) </script> </body> </html>
output result: show me 1 show me 11 show me 12 show me 13
3. v-show only supports single element display, and does not support multiple elements contained in
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue条件渲染</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <p class="test"> <p v-show="isDisplay"> <!--if...else... 单个元素,注意注意 v-show 不支持 <template> 语法--> 显示我1 </p> <p v-else> 显示我2 </p> </p> <script type="text/javascript"> var myVue =new Vue({ el: ".test", data: { isDisplay: 1 } }) </script> </body> </html>
4. The difference between v-if and v-show
Simple understanding of Vue conditional rendering
The above is the detailed content of Simple understanding of Vue conditional rendering_vue.js. For more information, please follow other related articles on the PHP Chinese website!