vue2 - 条件渲染，列表熏染

1.条件熏染 v-if

(1).v-if="表达式"

(2).v-else-if="表达式"

(3).v-else="表达式"

适用于：切换频率较低的场景

特点：不展示的DOM元素直接被移除

注意：v-if可以和:v-else-if，v-else一起使用，但要求结构不能被“打断”

<div id="root">
  <!--使用v-if做条件渲染-->
  <h2 v-if="false"></h2>
  <h2 v-if="1 === 1"></h2>

  <!-- v-else和v-else-if -->
  <div v-if="n === 1">Angular</div> <!--if-->
  <div v-else-if="n === 2">React</div> <!--else if-->
  <div v-else-if="n === 3">Vue</div> <!--else if-->
  <div v-else>哈哈</div> <!--else-->

  <!-- v-if与template的配合使用 一次性隐藏多个元素或显示多个元素-->
  <template v-if="n === 1">
    <h2>你好1</h2>
    <h2>你好2</h2>
    <h2>你好3</h2>
  </template>
</div>

<script>
  const vm = new Vue({
    el: '#root',
    data: {
      n: 0
    }
  })
</script>

 

2.条件熏染 v-show

写法：v-show="表达式"

适用于：切换频率较高的场景。

特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到

<!-- 使用v-show做条件渲染 -->
<h2 v-show="false"></h2> 
<h2 v-show="1 === 1"></h2> 

 

3.条件熏染 v-for

用于展示列表数据

语法：v-for="(item, index) in xxx" :key="yyy"

可遍历：数组，对象，字符串，指定次数

<div id="root">
  <!--遍历数组-->
  <li v-for="(value,index) of objArray" :key="value.id">
    {{value.id}} - {{value.name}}
  </li>

  <!--遍历对象-->
  <li v-for="(value,key) of obj" :key="key">
    {{key}} - {{value}}
  </li>

  <!--遍历字符串-->
  <li v-for="(char,index) of str" :key="index">
    {{index}} - {{char}}
  </li>

  <!--遍历指定次数-->
  <li v-for="(number,index) of 20">
    {{index}}/{{number}}
  </li>
</div>