Vue学习第二篇条件渲染循环

Alpha

August 9, 2023

3795 views

No comments

1615 words

前端开发

## 条件渲染

- v-if
- v-else
- v-else-if
- v-show

**v-if和v-show的区别：
v-if是真实条件渲染，它是惰性的，区块内的监听器和子组件都会被销毁重建
只有首次条件为true的时候，它才会被渲染

---

```
v-show就简单很多无论初始条件如何，都会被初次渲染，只有css的属性在切换
v-if有更高的切换开销，而v-show有更高的初始渲染开销
```

如果要频繁切换，v-show更好，如果运行时条件很少改变，v-if更好

## 循环渲染

```javascript
<template>
  <h3>列表渲染</h3>
  <p v-for="item in names">{{ item }}</p>
</template>

```

非常简单，显而易见

**复杂数据
大多数情况都是用json

```javascript
<template>
  <h3>列表渲染</h3>
  <p v-for="item in names">{{ item }}</p>

r: [
        { id: 1, name: "a", age: 10 },
        { id: 2, name: "b", age: 12 },
        { id: 3, name: "c", age: 13 },
      ],
    };
  },
};
</script>

```

**(item,index) in items**
v-for也支持使用第二个参数，表示当前项的位置索引，需要注意的是，从0开始！

in 可以用 of替代，这样更加符合js的迭代器语法

### 你可以使用v-for来遍历一个对象的所有属性

**(item,index) in items**

```javascript
<template>
  <h3>列表渲染</h3>
  <p v-for="item in names">{{ item }}</p>

<div v-for="i in r">
    <p>{{ i.name }}</p>
    <img :src="i.age" />
  </div>
  <hr />
  <div>
    <p v-for="(value, key, index) in userInfo">
      {{ value }}-{{ key }}-{{ index }}
      <hr>
    </p>
  </div>
</template>

r: [
        { id: 1, name: "a", age: 10 },
        { id: 2, name: "b", age: 12 },
        { id: 3, name: "c", age: 13 },
      ],

userInfo: {
        name: "alpha",
        age: 18,
        sex: "男"
      },
    };
  },
};
</script>

```

## 通过key管理状态

vue默认按照就地更新的策略更新通过v-for渲染的列表
所以数据的顺序改变的时候，vue不会更新顺序，而是就地更新，确保在原本的位置上进行渲染

```javascript
<p v-for="(item,index) in names" :key="index">{{ item }}</p>
```

也就是，这样排序或者更换位置，不需要重新渲染，而是直接更换位置

跟一个key，设置成索引

Last modification：August 9, 2023

如果觉得我的内容对你有用，请随意赞赏

Leave a Comment Cancel reply 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

Vue学习第二篇 条件渲染 循环