简单理解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显示多个元素,需配合