Vue 조건부 렌더링_vue.js에 대한 간단한 이해-JS 튜토리얼-php.cn

이 글은 주로 Vue 조건부 렌더링이 무엇인지 이해하는 데 도움이 됩니다. 관심 있는 친구들이 참고할 수 있습니다.

1. v-if는 단일 요소를 표시합니다. 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>

로그인 후 복사

만 따르세요. 출력 결과는 다음과 같습니다. show me 1

2. v-if는 여러 요소를 표시하며