Einfaches Verständnis von Vue Conditional Rendering

Dieser Artikel hilft vor allem jedem, einfach zu verstehen, was Vue-bedingtes Rendering ist. Interessierte Freunde können sich darauf beziehen. 1. v-if Element

Beachten Sie, dass else nur auf v-if oder v-show folgen kann

<!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>

Nach dem Login kopieren

Das Ausgabeergebnis ist: show me 1

2. v-if zeigt mehrere Elemente an und muss mit

Einfaches Verständnis von Vue Conditional Rendering_vue.js