簡單理解Vue條件渲染_vue.js-js教程-PHP中文網

這篇文章主要幫助大家簡單理解Vue條件渲染，什麼是Vue條件渲染,具有一定的參考價值，有興趣的夥伴們可以參考一下

一、v-if顯示單一元素

注意else只能跟在v-if或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>

登入後複製

輸出結果是:顯示我1

二、v-if顯示多個元素,需配合