在vue中条件渲染指令
 
 不可见 (vue-not-visible)
 
 
Vue directive for conditional rendering (like v-if) element on screen smaller than breakpoints.
 
 
 屏幕上小于断点的条件渲染(如v-if)元素的Vue指令。 
 
 

  View demo 
  查看演示 
  Download Source 
  下载源 
 
 
 安装 (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随侧边栏进行伸缩。目的效果如下：
 
   
 
在进入正题前，先说说我的实现思路（部分含关键代码）。大牛请跳过，若有不足也请指正。
 
优化方向和解决方案：
 
伸缩状态能够被保存（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>
 
 

<!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，不然会出现复用上一条数据的隐患
 

条件渲染
 
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>