Vue3+.net6.0 六 渲染相关指令v-if，v-else-if，v-else，v-show，v-for

v-if，v-else-if，v-else

控制元素是否渲染，不满足条件的时候不会有相应元素。

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

用法很简单，需要注意的就是一定要放在元素上。

如果需要同时控制多个元素，就用<template>模板标签。

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

 

 

v-show

效果上和v-if一样，但是是控制元素是否显示，也就是display

<h1 v-show="ok">Hello!</h1>

 

v-if和v-show的选择

我个人觉得，如果元素需要频繁控制展示/隐藏，首选v-show，如果是页面初始化时就能确认元素是否要渲染了，用v-if。

比如展开/收起 这种操作，当然选v-show，但如果是根据数据的状态展示不同的信息，用v-if控制。

 

v-for

循环，通常用来渲染列表。

1.循环一个list对象

data() {
  return {
    items: [{ message: 'Foo' }, { message: 'Bar' }]
  }
}

<li v-for="item in items">
  {{ item.message }}
</li>

2.同时获取索引

<li v-for="(item, index) in items">
  {{ parentMessage }} - {{ index }} - {{ item.message }}
</li>

3.循环访问一个对象

data() {
  return {
    myObject: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
}

<li v-for="(value, key, index) in myObject">
  {{ index }}. {{ key }}: {{ value }}
</li>

不需要key和index的时候，可以不写，只有一个项时，括号也可以不要。

4.循环一个范围

需要注意n是从1开始，不是索引。

<span v-for="n in 10">{{ n }}</span>

5.循环 多个元素

当需要循环多个元素时，用<template>标签。

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider" role="presentation"></li>
  </template>
</ul>

6.为循环的项设置key

任何情况下，都建议设置key，避免出现问题，这个跟Vue的默认更新策略有关，当然如果你的列表仅仅作为展示，不需要即时的操作和修改dom，那么也可以根据实际情况选择，反之还是加上key。

<div v-for="item in items" :key="item.id">
  <!-- 内容 -->
</div>

 

v-if和v-for

v-if的级别比v-for高，也就是说如果一个元素上两个都有，会先执行v-if。