乐码库:一个极速、放心、纯净的下载站! 更新: 资源发布
  • 您的位置:首页 > 技术文档 > JavaScript > 简单理解Vue条件渲染
  • 收藏本页
      简单理解Vue条件渲染
      发布时间:2016-12-21 08:09:46 关键词: vue,vue条件渲染,v,if,v,show,v,else
      内容简介:这篇文章主要帮助大家简单理解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>
     <div class="test">
     <div v-if="isDisplay"> <!--if...else... 单个元素-->
     显示我1
     </div>
     <div v-else>
     显示我2
     </div>
     </div>
     <script type="text/javascript">
     var myVue =new Vue({
     el: ".test",
     data: {
      isDisplay: 1
     }
     })
     </script>
     </body>
    </html>
    

    输出结果是:显示我1

    二、v-if显示多个元素,需配合<template>

    注意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>
     <div class="test">
     <template v-if="isDisplay"> <!--if...else... 用template实现多个元素-->
     <div>显示我1</div>
     <div>显示我11</div>
     <div>显示我12</div>
     <div>显示我13</div>
     </template>
     <div v-else>
     显示我2
     </div>
     </div>
     <script type="text/javascript">
     var myVue =new Vue({
     el: ".test",
     data: {
      isDisplay: 1
     }
     })
     </script>
     </body>
    </html>
    

    输出结果: 显示我1 显示我11 显示我12 显示我13

    三、v-show只支持单元素显示,不支持<template>包含的多元素

    注意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>
     <div class="test">
     <div v-show="isDisplay"> <!--if...else... 单个元素,注意注意 v-show 不支持 <template> 语法-->
     显示我1
     </div>
     <div v-else>
     显示我2
     </div>
     </div>
     <script type="text/javascript">
     var myVue =new Vue({
     el: ".test",
     data: {
      isDisplay: 1
     }
     })
     </script>
     </body>
    </html>

    四、v-if与v-show的区别

    (1)v-if是真实的渲染与卸载,只不过第一次渲染后,会将结果缓存一下

    (2)v-show元素始终被编译并保留,只是简单地基于 CSS 切换

    (3)总结: 如果需要频繁切换 v-show 较好,如果在运行时条件不大可能改变 v-if 较好

    gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson08

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持乐码库。

      最新更新
      热门排行榜