Vue-条件渲染if与show的区别

v-show：当绑定的值( 或表达式的值 ) 为 true 时，在页面上展示

 当绑定的值、绑定的表达式 分别为 true 和 false 时

<div id="root">
 <div id="root">
  <h3 v-show="true">{{name}}</h3>

  <h3 v-show="1 === 1">{{name}}</h3>

  <h3 v-show="false">{{name}}</h3>

  <h3 v-show="1 === true">{{name}}</h3>
</div>
</div>

<script>
  Vue.config.productionTip = false

  const vm = new Vue({
    el: '#root',
    data() {
      return {
        name: 'v-show展示',
      }
    }
  })
</script>

 

 当 v-show 绑定的值( 或表达式 ) 为 true 时。在页面上展示了该元素。

 当 v-show 绑定的值( 或表达式 ) 为 false 时。在页面上没有展示该元素，查看 DOM 节点发现，在标签上 默认添加了 一个   style="display: none;"。

ps：当然，绑定的值最好默认是动态的，所以我们可以将绑定的值，或表达式存在 data 中，利用 Vue的数据绑定实现动态切换展示状态

v-if：当绑定的值( 或表达式的值 ) 为 true 时，在页面上展示

 v-if 和 v-show 类似，都是通过绑定值，来确定是否展示在页面上

<h3 v-if="true">{{name}}</h3>
<h3 v-if="1 === 1">{{name}}</h3>
<h3 v-if="false">{{name}}</h3>
<h3 v-if="1 === true">{{name}}</h3>

<script>
  Vue.config.productionTip = false

  const vm = new Vue({
    el: '#root',
    data() {
      return {
        name: 'v-if展示',
      }
    }
  })
</script>

 但是区别就是，同样都是页面上只展示了两个DOM 节点，但是如果 v-if 的绑定值( 或绑定的表达式 ) 为false 时，该DOM节点是不存在的，不像 v-show 一样，是通过  style="display: none;" 来 通过 css 样式控制的

同样的，和 if 表达式类似，既然有了 v-if ，那么就需要相对应的 v-else ，用来做对应的逻辑，且 v-else 之后不用绑定值或者表达式

<h3 v-if="1 === 1">{{name}}</h3>
<div v-else>
  <h3>{{name}}</h3>
  <h3>{{name}}</h3>
</div>

 有了 v-if、v-else，那么 如果我们需要连续的 if、else ，类似于表达式的 else if( ){ } 怎么办?

Vue 提供了 v-else-if 用来充当  v-if 的“else-if 块”，可以连续使用：

<h3 v-if="type == 1">{{name}}1</h3>
<div v-else-if='type == 2'>
  <h3>{{name}}2</h3>
</div>
<div v-else-if='type == 3'>
  <h3>{{name}}3</h3>
</div>

<script>
  Vue.config.productionTip = false

  const vm = new Vue({
    el: '#root',
    data() {
      return {
        name: 'v-if展示',
        type: '2'
      }
    }
  })
</script>

 

 使用 key 来管理可复用的元素

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address">
</template>

<script>
  Vue.config.productionTip = false

  const vm = new Vue({
    el: '#root',
    data() {
      return {
        name: 'v-if展示',
        loginType: 'username'
      }
    },
    methods: {
      changeUser() {
        if (this.loginType === 'username') {
          this.loginType = 'Email'
        } else {
          this.loginType = 'username'
        }
      }
    },
  })
</script>

上面的代码就是，在点击按钮实现切换，控制展示的是 unername 还是 email，

1、直接点击切换按钮，发现此时 label 和 input 内的 placeholder 都是改变了的

2、在输入框中填入值之后，点击按钮发现，此时label 确实是切换了，但是 input 里面的内容是没有改变的。

这是因为，两个 templete 中，input 元素是复用了的，只不过标签内的 placeholder 属性改变了

那这么说，两个 templete 中 label 也是重复的，那 label 存在复用的情况么？答案是存在，label 在这个案例中，一直都是复用的。

很明显的，这不是很符合实际情况，我们希望的是 input 是 独立的，切换之后，input 会重新渲染，清空输入值，所以 Vue 提供了 属性 key ，通过为 key 指定唯一值，来保证在渲染时不会出现复用的情况。这个 key 是不用动态绑定的，可以直接写死，当然了，也是可以动态绑定的。

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email">
</template>

此时，即使在 input 输入了值，但是因为 设置了 key ，所以在点击按钮切换 的时候，input 会重新渲染，内部的值也会被清空，当然了 label  因为没有 key ，还是会被复用的。

v-if 和 v-show 的区别

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

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

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

v-if与v-show的区别

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