Simple understanding of Vue conditional rendering

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>

Copy after login

The output result is: show me 1

2. v-if displays multiple elements and needs to be matched with

Simple understanding of Vue conditional rendering_vue.js