精华内容
下载资源
问答
  • 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中条件渲染指令

    展开全文
  • 最近在优化老的项目组件时,想利用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-ifv-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条件渲染和列表渲染,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 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...
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue中的条件渲染</title>
        <!--引入vue.js库-->
        <script src="../vue.js"></script>
    </head>
    
    <body>
    <div id="app">
        <div v-if="flag">{{content}}</div>
        <div v-show="flag">{{content}}</div>
    </div>
    
    <div>{{content}}</div>
    
    <script>
        /*创建了一个vue实例*/
        var app = new Vue({
            el: '#app',
            data: {
                flag: false
                content: 'hello world'
            }
        });
    </script>
    </body>
    </html>
    
    

    v-if会销毁dom
    v-show只是多一个style="display: none;,建议使用v-show
    在这里插入图片描述
    在这里插入图片描述
    v-if、v-else-if、v-else不能分开,分开会报错

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue中的条件渲染</title>
        <!--引入vue.js库-->
        <script src="../vue.js"></script>
    </head>
    
    <body>
    <div id="app">
        <div v-if="show === 'a'">this is A</div>
        <div v-else-if="show === 'b'">this is B</div>
        <div v-else="show === 'a'">this is other</div>
    </div>
    
    <script>
        /*创建了一个vue实例*/
        var vm = new Vue({
            el: '#app',
            data: {
                show: "a"
            }
        });
    </script>
    </body>
    </html>
    
    

    给每个input添加一个key,不然会出现复用上一条数据的隐患

    在这里插入图片描述

    展开全文
  • vue中条件渲染详解

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

    条件渲染

    v-show

    根据表达式之真假值,切换元素的display CSS属性

    v-if

    用于条件性低渲染一块内容

    v-if v-else-if v-else

    用于多条件情况判断

    eg

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>模拟登陆</title>
    		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    	</head>
    	<body>
    		<div id="app">
    		<!--当status为真时,显示,为false时,不显示  -->
    			<p v-show="status">hello Vue</p>
    			
    			<!-- 条件渲染一块内容 -->
    			<p v-if="username=='lam'">hello Vue1</p>
    			
    			<!-- 多个条件判断 -->
    			<p v-if="score<60">不及格</p>
    			<p v-else-if="score>=60 && score<80">良好</p>
    			<p v-else-if="score>=80 && score<100">优秀</p>
    			<p v-else>搞错了</p>		
    		</div>
    	</body>
    </html>
    <script type="text/javascript">
    	var vm = new Vue({
    		el:'#app',
    		data:{	
    			status:true,
    			username:'lam',	
    			score:991						
    							
    		},
    		methods:{			
    			
    		}
    	})	
    	
    </script>
    
    
    展开全文
  • 简单理解Vue条件渲染

    2020-09-01 01:46:33
    主要帮助大家简单理解Vue条件渲染,什么是Vue条件渲染,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • Vue 3 条件渲染

    2020-10-15 21:31:15
    条件渲染实验介绍可以使用条件判断的方式来分别渲染。v-ifv-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。<template&...
  • Vue条件渲染

    多人点赞 2019-06-14 09:29:09
    本博客记录了小编在学习Vue过程的体会与感悟,简单来说就是小编的学习笔记,学习...用于条件性的渲染一块内容,这块内容只会在指令的表达式返回truthy值的时候被渲染。 <h1 v-if="awesome">I like Vue!&...
  • Vue条件渲染 Vue条件渲染是使用v-if , v-else,v-show等指令实现元素的移除,样式隐藏,显示等 案例如下代码: &lt;div id="demo"&gt; &lt;p v-if="ok"&gt;成功了&...
  • Vue条件渲染指令

    2018-09-16 14:40:44
    与JS的条件语句类似,Vue条件指令可以根据表达式的值在DOM中渲染或者销毁元素/组件 v-else-if要紧跟v-if,v-else要紧跟v-else-if或者v--if,表达式的值为真时,当前元素/组件以及所有子节点将被渲染,为假时被...
  • Vue条件渲染和对象渲染

    千次阅读 2019-05-23 20:03:25
    三、条件渲染 通过条件指令可以控制元素的创建(显示)或者销毁(隐藏) v-if 条件判断使用 v-if 指令 v-else v-else 指令给 v-if 添加一个 “else” 块 v-else-if 用作 v-if 的 else-if 块 v-show 使用v-...
  • vue中我们可以使用v-if语句进行条件渲染,用v-for指令根据一组数组的选项列表进行渲染。本文就来为大家详细介绍一下vue中条件渲染和列表渲染。一、条件渲染1、v-if语句hahahah如果seen为true,则显示,如果seen...
  • vue中条件渲染

    2019-02-22 11:11:24
    v-if:如果判断条件show为false的话,就删除dom元素,反之为true就添加dom元素: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-...
  • Vue入门 Demo11 Vue中条件渲染 <!DOCTYPE html> <html lang="en"> <head> <meta content="text/html; charset=utf-8" /> <title>Vue中条件渲染</title> ...
  • 文章目录vue 渲染条件渲染v-if 与 v-else渲染 以及 v-show列表渲染遍历对象 vue 渲染 条件渲染 v-if 与 v-else渲染 以及 v-show v-if 与 v-else 有条件的渲染一块内容, v-if 值选择的时候才加载,多余if不会存在内存...
  • 条件渲染 1.v-if: v-if=‘name’ :name值的true 或 false ,决定着这个标签的是否显示 2.v-show: v-show=‘show’ show的值true 或 false ,决定着这个标签的是否显示 两者的区别:当表达式中值是为false时...
  • Vue入门(1):Vue条件渲染、声明式渲染以及处理用户输入 一、什么是Vue.js Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。...
  • 主要介绍了Vue.js 条件渲染指令,Vue.js 条件渲染指令可以根据表达式的值,来决定在 DOM 是渲染还是销毁元素或组件。本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考...
  • 学习vue.js条件渲染

    2020-10-20 23:17:21
    主要和大家一起学习vue.js条件渲染,代码注释详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 26,229
精华内容 10,491
关键字:

vue中条件渲染

vue 订阅