精华内容
下载资源
问答
  • vue中条件渲染指令 不可见 (vue-not-visible) Vue directive for conditional rendering (like v-if) element on screen smaller than breakpoints. 屏幕上小于断点的条件渲染(如v-if)元素的Vue指令。 View demo...

    在vue中条件渲染指令

    不可见 (vue-not-visible)

    Vue directive for conditional rendering (like v-if) element on screen smaller than breakpoints.

    屏幕上小于断点的条件渲染(如v-if)元素的Vue指令。

    安装 (Install)

    $ npm install --save vue-not-visible
    $ yarn add vue-not-visible

    默认情况下使用 (Use default)

    import Vue from 'vue'
    import vueNotVisible from 'vue-not-visible'
    
    /* const BREAKPOINTS = {
        mobile: 425,
        tablet: 768,
        tablet_landscape: 1024,
        desktop: 1200,
        desktop_large: 1440,
        hd: 1920,
    }
    */
    Vue.use(vueNotVisible) // this is default
    <template>
      <div id="test">
            {{ message }} {{ count }}
            <div v-not-visible="'tablet'"> 
                <div v-on:click="count = count + 1">Not visible on table(screen < 768)</div>
            </div>
            <div v-not-visible="'mobile'">
                <div v-on:click="count = count + 1">Not visible on mobile(screen < 425)</div>
            </div>
        </div>
    </template>

    使用自定义断点 (Use custom breakpoints)

    import Vue from 'vue'
    import vueNotVisible from 'vue-not-visible'
    
    Vue.use(vueNotVisible, {ipad: 1280}) // this is custom
    <template>
      <div id="test">
            {{ message }} {{ count }}
            <div v-not-visible="'ipad'"> 
                <div v-on:click="count = count + 1">Not visible on ipad(screen < 1280)</div>
            </div>
        </div>
    </template>

    翻译自: https://vuejsexamples.com/vue-directive-for-conditional-rendering-element-on-screen-smaller-than-breakpoints/

    在vue中条件渲染指令

    展开全文
  • 条件渲染指令v-if和v-show v-if和v-show的区别 如果用v-if和v-show来实现DOM元素的显示与不显示 v-if实现dom元素的删除 v-show只是内部添加display:none样式 需要频繁的使用切换,那么就用v-show (使用了指令 v-if...

    条件渲染指令v-if和v-show

    v-if和v-show的区别

    如果用v-if和v-show来实现DOM元素的显示与不显示

    v-if实现dom元素的删除

    v-show只是内部添加display:none样式

    需要频繁的使用切换,那么就用v-show

    (使用了指令 v-if , v-show ,@click )

    @click=“flag=!flag” 点击切换

    <template>
        <div>
            <div v-if="flag">今天晚上出去玩</div>
            <div v-else>今天晚上不出去玩</div>
            <p></p>
            <button @click="flag=!flag">切换</button>
            <p>---------------------------------------</p>
            <div v-show="flag">现在吃饭</div>
            <div v-show="!flag">现在不吃饭</div>
        </div>
    
    </template>
    
    <script>
        export default {
            name: "IfAndShow",
            data(){
                return{
                    flag:true,
                }
            }
        }
    </script>
    
    <style scoped>
    
    </style>
    
    展开全文
  • v-if <body> <div id="app"> <... helllo Vue </div> <template v-if="isShow"> <p>hello world</p> <div>hello shimao...

    v-if

    	<body>
    		<div id="app">
    			<div v-if="isShow">
    				helllo Vue
    			</div>
    			<template v-if="isShow">
    				<p>hello world</p>
    				<div>hello shimao</div>
    				<span>www.shimao.org</span>
    			</template>
    		</div>
    		<script type="text/javascript">
    			var app = new Vue({
    				el:'#app',
    				data:{
    					isShow:false
    				}
    			})
    		</script>
    	</body>

    查看DOM发现当isShow为false时 对应DOM元素是不存在

    v-show

    	<body>
    		<div id="app">
    			<div v-show="isShow">
    				helllo Vue
    			</div>
    			<!-- v-show 不支持template -->
    			<template v-show="isShow">
    				<p>hello world</p>
    				<div>hello shimao</div>
    				<span>www.shimao.org</span>
    			</template>
    		</div>
    		<script type="text/javascript">
    			var app = new Vue({
    				el:'#app',
    				data:{
    					isShow:false
    				}
    			})
    		</script>
    	</body>

     同样查看DOM,v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display

    同时可以看出 v-show 不支持 <template> 元素,也不支持 v-else

     

    总的来说

    v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

    v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。

    相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。

    一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。

    展开全文
  • 最近在优化老的项目组件时,想利用vue自身的条件渲染和动画过渡来达到logo随侧边栏进行伸缩。目的效果如下: 在进入正题前,先说说我的实现思路(部分含关键代码)。大牛请跳过,若有不足也请指正。 优化方向和...

    最近在优化老的项目组件时,想利用vue自身的条件渲染和动画过渡来达到logo随侧边栏进行伸缩。目的效果如下:

    logo缩小状态   logo放大状态

    在进入正题前,先说说我的实现思路(部分含关键代码)。大牛请跳过,若有不足也请指正。

    优化方向和解决方案:

    • 伸缩状态能够被保存(F5保存,页面关闭清除):使用vuex和cookie中(可用sessionStorage代替)。
    // store.js
    export default new Vuex.Store({
      state: {
        sidebar: {
          opened: !+Cookies.get('sidebarStatus')
        }
      },
      mutations: {
        TOGGLE_SIDEBAR: state => {
          if (state.sidebar.opened) {
            Cookies.set('sidebarStatus', 1)
          } else {
            Cookies.set('sidebarStatus', 0)
          }
          state.sidebar.opened = !state.sidebar.opened
        }
      },
      actions: {
        toggleSideBar ({ commit }) {
          commit('TOGGLE_SIDEBAR')
        }
      }
    })
    • logo优化:svg上传阿里图标库,制作成字体来使用,一是节省图片大小,二是利于控制图片(颜色大小etc)。
    • 尽量减少代码以及页面渲染消耗
    <template>
      <div class="sidebar-container">
        <div class="logo">
          <div style="height:50px;width:100%;">
            <transition name="fade">
              <i v-show="!isCollapse" key="logo-open" class="iconfont logo-open"></i>
              <i v-show="isCollapse" key="logo-close" class="iconfont logo-close"></i>
            </transition>
          </div>
          <!-- <transition name="fade">
            <div v-show="!isCollapse" key="logo-open" style="width:200px;height:50px;"><i class="iconfont iconweizhuLOGO logo-open"></i></div>
            <div v-show="isCollapse" key="logo-close" style="width:50px;height:50px;"><i class="iconfont iconweizhuLOGO1 logo-close"></i></div>
          </transition> -->
        </div>
        <div class="nav-container">
          <el-scrollbar class="page-scroll">
            <el-menu class="navBar"
              mode="vertical"
              :default-active="$route.path"
              :collapse="isCollapse"
              background-color="#304156"
              text-color="#ccc"
              active-text-color="#fff"
              unique-opened
              router>
              <template v-for="(item, index) in navList">
    
                <el-submenu v-if="item.children" :index="`${index}`" :key="index">
                  <template slot="title">
                    <i class="iconfont" :class="item.icon"></i>
                    <span slot="title">{{item.title}}</span>
                  </template>
    
                  <template v-for="(item2, index2) in item.children">
                    <el-submenu v-if="item2.children" :index="`${index}-${index2}`" :key="`${index}-${index2}`">
    
                      <template slot="title">{{item2.title}}</template>
    
                      <el-menu-item  v-for="(item3, index3) in item2.children" :index="item3.url" :key="`${index}-${index2}-${index3}`">{{item3.title}}</el-menu-item>
    
                    </el-submenu>
                    <el-menu-item v-else :index="item2.url" :key="`${index}-${index2}`">{{item2.title}}</el-menu-item>
                  </template>
    
                </el-submenu>
    
                <el-menu-item v-else :index="item.url" :key="index">
                  <i class="iconfont" :class="item.icon"></i>
                  <span slot="title">{{item.title}}</span>
                </el-menu-item>
    
              </template>
            </el-menu>
          </el-scrollbar>
        </div>
      </div>
    </template>
    
    <script>
    import { mapState } from 'vuex'
    export default {
      data () {
        return {
          navList: [
            { title: '我的应用', icon: 'iconapp', url: '/myapp/list' }
          ]
        }
      },
      computed: {
        ...mapState([
          'sidebar'
        ]),
        isCollapse () {
          return !this.sidebar.opened
        }
      }
    }
    </script>
    
    <style lang="scss" scoped>
    .logo{
      position: absolute;
      width: 100%;
      z-index: 999;
      top: 0px;
      left: 0px;
      height: 50px;
      >div{
        text-align: center;
      }
      .iconfont{
        font-size: 28px;
        color: #fff;
        line-height: 50px;
      }
    }
    .navBar /deep/{
      padding-top: 90px;
      border: none;
      .el-menu-item, .el-submenu__title{
        height: 50px;
        line-height: 50px;
        > i.iconfont{
          position: relative;
          display: inline-block;
          width: 16px;
          height: 16px;
          font-size: 16px;
          margin-right: 4px;
        }
        > i.iconfont::before{
          position: absolute;
          width: 16px;
          height: 16px;
          top: -16px;
          left: 0;
        }
      }
      >.el-submenu>.el-menu .el-menu-item{
        position: relative;
        padding-left: 53px !important;
      }
      >.el-submenu>.el-menu .el-menu-item::before{
        content: "";
        position: absolute;
        top: 22px;
        left: 40px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #fff;
      }
    }
    .el-menu--collapse /deep/{
      width: 50px;
      .el-tooltip, .el-submenu__title{
        i.iconfont{
          font-size: 14px;
        }
      }
    }
    .navBar:not(.el-menu--collapse){
      width: 200px;
    }
    .fade-enter-active, .fade-leave-active {
      transition: opacity .5s;
    }
    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
      opacity: 0;
    }
    </style>
    

    好了,进入正题。

    在优化开始之前其实是没有使用vue中的transition组件的,这导致了一个logo在随侧边栏打开或者关闭的时候,过渡期间跟侧边栏无法保持同步(请原谅我的手速无法解决到哪个尴尬的场景)。很明显地可以看到,侧边是宽度有过渡效果的放大缩小,而logo是直接在放大和缩小之间进行转换,没有过渡效果的logo宽度会在侧边栏过渡期间撑爆侧边栏,看着特别不舒服。

    第一个想到的是用js监听侧边栏宽度,然后动态改变logo宽度,在恰当时间点对logo进行神不知鬼不觉地替换,达到完美同步。

    在理了理思路和考虑渲染成本和代码长度之后我放弃了。

    因为第二个办法就是直接使用transition和v-show组合,并让logo宽度进行自适应。也就是以上代码。结果却是这样

    transition里面只能使用单个元素,如果多个元素,请使用transition-group。

    这里要说一下条件渲染的两个元素,v-if和v-show。

    官方有详细说明,我这里只是简单总结一下。

    v-if v-show
    重新渲染dom节点,条件为假时dom不存在 控制css的display属性来决定是否隐藏,条件真假dom都存在
    支持template,有附属元素v-else 不支持template和v-else

    也就是说,上面的bug有两个解决方案,一个是v-show + transition-group或者v-if + v-else + transition。后者v-if + v-else会被视为一个元素(亲测)而v-show在这种情况下只能算两个元素。官方似乎没有说明这个隐藏属性,当然逻辑上其实也不需要太多说明。最后我这里选择了v-show + transition的方案,因为不需要重复渲染dom。

    知识点GET到了之后,又进入题外,不需要的可以直接alt+f4了。

    到这里为止,我以为优化工作基本完成,事实上,这种方式还有bug。在logo切换时,会有同时存在大小logo的情况,还是会错位。

    官方文档有解决方案:mode=“out-in”

    自定义过渡动画

    <transition-group name="fade">
      <i v-show="!isCollapse" key="logo-open" class="iconfont logo-open"></i>
      <i v-show="isCollapse" key="logo-close" class="iconfont logo-close"></i>
    </transition-group>
    
    .fade-enter-active, .fade-leave-active {
      transition: opacity .5s;
    }
    .fade-leave-to{
      display: none;
    }
    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
      opacity: 0;
    }

    当然,如果不建议这点dom节点渲染的消耗,也可以使用

    <transition name="fade" mode="out-in">
      <i v-if="!isCollapse" key="logo-open" class="iconfont logo-open"></i>
      <i v-else key="logo-close" class="iconfont logo-close"></i>
    </transition>

     

    展开全文
  • Vue - 条件渲染

    2020-07-28 09:18:24
    Vue 中条件渲染一. v-if 和 v-show二. v-if 和 v-else三. v-if、v-else-if 和 v-else四. 条件渲染,key 值的使用 一. v-if 和 v-show v-if :当 isShow 为 false 时,内容不存在Dom中,内容是不存在的, v-show :...
  • vue中条件渲染详解

    2020-07-26 11:32:55
    vue中条件渲染
  • Vue条件渲染

    2020-03-10 14:59:08
    条件渲染 1.v-if 条件性的渲染一块内容 指令的表达式返回为true的时候渲染 反之为false 不渲染 <p v-if="first">one</p> <p v-if="second">two</p> <p v-if="third">null<...
  • 这两天学习了Vue.js 感觉条件渲染和列表渲染知识点挺多的,而且很重要,所以,今天添加一点小笔记。 条件渲染 v-if 在 < template> 配合 v-if 渲染一整组 在使用 v-if 控制元素的时候,我们需要将它添加到这个...
  • 介绍之前一段时间由于工作很忙,没有时间继续学习Vue,今天算是继续对...条件渲染对于条件渲染,其概念就是满足条件的渲染界面输出,在Vue中借助if,if-else,if-else-if,show等的帮助下完成条件检查,我们首先通...
  • 介绍之前一段时间由于工作很忙,没有时间继续学习Vue,今天算是继续对...条件渲染对于条件渲染,其概念就是满足条件的渲染界面输出,在Vue中借助if,if-else,if-else-if,show等的帮助下完成条件检查,我们首先通...
  • VUE-条件渲染

    2020-09-30 10:29:09
    在template元素上使用v-if条件渲染分组 Title Paragraph 1 Paragraph 2 v-else v-else类似于if else 的else块 Now you see me Now you don't v-else必须紧跟在 v-if 或者 v-else-if的元素后面。 v-else-...
  • Vue中条件渲染

    2020-01-09 18:22:15
    <!DOCTYPE html> <html lang="en"> <head> ...meta charset="UTF-8">...Vue中条件渲染</title> <!--引入vue.js库--> <script src="../vue.js"></sc...
  • 这两天学习了Vue.js 感觉条件渲染和列表渲染知识点挺多的,而且很重要,所以,今天添加一点小笔记。条件渲染v-if在 < template > 配合 v-if 渲染一整组在使用 v-if 控制元素的时候,我们需要将它添加到这个...
  • Vue入门 Demo11 Vue中条件渲染 <!DOCTYPE html> <html lang="en"> <head> <meta content="text/html; charset=utf-8" /> <title>Vue中条件渲染</title> ...
  • Vue条件渲染

    多人点赞 2019-06-14 09:29:09
    本博客记录了小编在学习Vue过程的体会与感悟,简单来说就是小编的学习笔记,学习...用于条件性的渲染一块内容,这块内容只会在指令的表达式返回truthy值的时候被渲染。 <h1 v-if="awesome">I like Vue!&...
  • vue 条件渲染

    2020-01-20 10:15:13
    1:3-7 v-if v-else要连在一起用,中间不能间隔其他标签 2:v-if ="show==='a'" v-if ="show==='a'" ...3.条件渲染的时候,如果不加 key. VUE会默认这是已经加载过的input,会从内存里拿缓存数据.不会重新加载渲染. ...
  • [vue] 条件渲染

    2019-01-28 10:43:32
    条件渲染 原文链接:条件渲染 v-if 在字符串模板中,比如Handlebars,我们得像这样写一...在 Vue中,我们使用v-if指令实现同样的功能: &lt;h1 v-if="ok"&gt;Yes&lt;/h1&gt; 也可以用v-e...
  • 条件渲染 上一篇:Class 与 Style 绑定:https://segmentfault.com/a/11...下一篇:Vue的事件处理方法:https://segmentfault.com/a/11... v-if 在 < template > 配合 v-if 渲染一整组 在使用 v-if 控制元素...
  • vue-条件渲染

    2020-03-21 14:39:44
    (1)v-if:作用与v-show相同,本质是通过操纵dom元素来切换显示状态,表达式的值为true,元素存在于dom树,相反则移除。 (2)v-else v-else-if (3)template v-if ,包装元素template 不会被创建 (4)v-show:根据真假...
  • Vue条件渲染

    2017-04-21 16:32:23
    在字符串模板,如 Handlebars ,我们得像这样写一个条件块: {{#if ok}} h1>Yesh1>{{/if}} 在 Vue.js ,我们使用 v-if 指令实现同样的功能: h1 v-if="ok">Yesh1> 也...
  • Vue条件渲染指令

    2018-09-16 14:40:44
    与JS的条件语句类似,Vue条件指令可以根据表达式的值在DOM中渲染或者销毁元素/组件 v-else-if要紧跟v-if,v-else要紧跟v-else-if或者v--if,表达式的值为真时,当前元素/组件以及所有子节点将被渲染,为假时被...
  • 介绍之前一段时间由于工作很忙,没有时间继续学习Vue,今天算是继续对...条件渲染对于条件渲染,其概念就是满足条件的渲染界面输出,在Vue中借助if,if-else,if-else-if,show等的帮助下完成条件检查,我们首先通...
  • 介绍之前一段时间由于工作很忙,没有时间继续学习Vue,今天算是继续对...条件渲染对于条件渲染,其概念就是满足条件的渲染界面输出,在Vue中借助if,if-else,if-else-if,show等的帮助下完成条件检查,我们首先通...
  • 文章目录vue 渲染条件渲染v-if 与 v-else渲染 以及 v-show列表渲染遍历对象 vue 渲染 条件渲染 v-if 与 v-else渲染 以及 v-show v-if 与 v-else 有条件的渲染一块内容, v-if 值选择的时候才加载,多余if不会存在内存...
  • vue中条件渲染

    2018-09-02 15:00:56
    首先需要知道v-if这个指令 ...其实条件渲染就是通过判断v-if的值,来渲染页面 除了v-if还有一个v-show指令同样可以做到判断条件然后来渲染页面 那么他们两个有什么不同呢 开始时,isShow都是false...
  • vue中条件渲染8

    2019-02-23 20:31:16
    &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&...vue中条件渲染&lt;/title&gt; &lt;script src="vue.js"&gt;&lt;/script&gt; &l
  • 条件渲染 v-if v-if会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 <div id="app"> <h3 v-if="ok">Title</h3> <p v-if="no">Paragraph 1</p> <p v-if=...
  • vue条件渲染指令

    2019-11-13 12:24:31
    一、条件渲染指令 v-if 与 v-else v-show 二、比较 v-if 与 v-show 如果需要频繁切换 v-show 较好 当条件不成立时, v-if 的所有子节点不会解析(项目使用) 代码: <div id="demo"> <h2 v-if="ok">...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,039
精华内容 415
关键字:

vue中条件渲染

vue 订阅