✨ 10-列表渲染
This commit is contained in:
parent
34bd3c0a8b
commit
26bd061953
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="js/vue@2.7.16.js"></script>
|
||||
<title>10-列表渲染</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app">
|
||||
<ul>
|
||||
<!-- 可以遍历数组、对象、字符串 -->
|
||||
<li v-for="(item,index) in list" :key="index">
|
||||
{{item}}--{{item.name}}--{{index}}
|
||||
</li>
|
||||
</ul>
|
||||
<br>
|
||||
<ul>
|
||||
<li v-for="(item,index) of person" :key="index ">
|
||||
{{item}}--{{index}}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
const vm = new Vue({
|
||||
el: "#app",
|
||||
data: {
|
||||
list: [
|
||||
{ id: 1, name: "1" },
|
||||
{ id: 2, name: "2" },
|
||||
{ id: 3, name: "3" },
|
||||
{ id: 4, name: "4" },
|
||||
],
|
||||
person: {
|
||||
name: "Bunny",
|
||||
age: 16
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,158 @@
|
|||
# Vue2 列表渲染（v-for）详解文档
|
||||
|
||||
## 一、基本概念
|
||||
|
||||
Vue2 中的 `v-for` 指令用于基于源数据多次渲染元素或模板块。它可以遍历数组、对象和字符串，是构建动态列表的核心指令。
|
||||
|
||||
## 二、代码示例解析
|
||||
|
||||
```html
|
||||
<div id="app">
|
||||
<!-- 遍历数组 -->
|
||||
<ul>
|
||||
<li v-for="(item, index) in list" :key="item.id">
|
||||
{{item}}--{{item.name}}--{{index}}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- 遍历对象 -->
|
||||
<ul>
|
||||
<li v-for="(value, key, index) of person" :key="key">
|
||||
{{value}}--{{key}}--{{index}}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const vm = new Vue({
|
||||
el: "#app",
|
||||
data: {
|
||||
list: [
|
||||
{ id: 1, name: "1" },
|
||||
{ id: 2, name: "2" },
|
||||
{ id: 3, name: "3" },
|
||||
{ id: 4, name: "4" }
|
||||
],
|
||||
person: {
|
||||
name: "Bunny",
|
||||
age: 16
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
## 三、核心语法
|
||||
|
||||
### 1. 遍历数组
|
||||
```html
|
||||
<element v-for="(item, index) in array" :key="uniqueId">
|
||||
{{ index }}: {{ item }}
|
||||
</element>
|
||||
```
|
||||
|
||||
### 2. 遍历对象
|
||||
```html
|
||||
<element v-for="(value, key, index) in object" :key="key">
|
||||
{{ index }}. {{ key }}: {{ value }}
|
||||
</element>
|
||||
```
|
||||
|
||||
### 3. 遍历字符串
|
||||
```html
|
||||
<element v-for="(char, index) in string" :key="index">
|
||||
{{ index }}: {{ char }}
|
||||
</element>
|
||||
```
|
||||
|
||||
## 四、关键特性
|
||||
|
||||
| 特性 | 说明 | 示例 |
|
||||
| --------- | ---------------- | ----------------------- |
|
||||
| `in`/`of` | 两种语法等效 | `v-for="item in items"` |
|
||||
| 索引参数 | 可选的第二个参数 | `(item, index)` |
|
||||
| `:key` | 必须的唯一标识 | `:key="item.id"` |
|
||||
| 嵌套循环 | 支持多层嵌套 | 嵌套使用 `v-for` |
|
||||
|
||||
## 五、最佳实践
|
||||
|
||||
### 1. 正确的 key 使用
|
||||
- **必须**为每个节点提供唯一的 `key` 属性
|
||||
- **避免**使用索引作为 key（当列表会变化时）
|
||||
- **理想** key 应该是数据中的唯一 ID
|
||||
|
||||
```html
|
||||
<!-- 推荐 -->
|
||||
<li v-for="item in items" :key="item.id">
|
||||
|
||||
<!-- 不推荐 -->
|
||||
<li v-for="(item, index) in items" :key="index">
|
||||
```
|
||||
|
||||
### 2. 性能优化
|
||||
- 对大列表使用虚拟滚动（如 vue-virtual-scroller）
|
||||
- 避免在 `v-for` 中使用复杂表达式
|
||||
- 必要时使用 `v-if` 和 `v-for` 分离（Vue2 中 `v-for` 优先级更高）
|
||||
|
||||
### 3. 数组更新检测
|
||||
Vue 能检测以下数组方法的变化：
|
||||
- `push()`
|
||||
- `pop()`
|
||||
- `shift()`
|
||||
- `unshift()`
|
||||
- `splice()`
|
||||
- `sort()`
|
||||
- `reverse()`
|
||||
|
||||
## 六、高级用法
|
||||
|
||||
### 1. 范围迭代
|
||||
```html
|
||||
<span v-for="n in 10">{{ n }} </span>
|
||||
```
|
||||
|
||||
### 2. 组件中使用
|
||||
```html
|
||||
<my-component
|
||||
v-for="(item, index) in items"
|
||||
:item="item"
|
||||
:index="index"
|
||||
:key="item.id">
|
||||
</my-component>
|
||||
```
|
||||
|
||||
### 3. 过滤/排序列表
|
||||
```javascript
|
||||
computed: {
|
||||
filteredItems() {
|
||||
return this.items.filter(item => item.isActive);
|
||||
},
|
||||
sortedItems() {
|
||||
return [...this.items].sort((a, b) => a.price - b.price);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 七、常见问题
|
||||
|
||||
1. **为什么列表不更新？**
|
||||
- 确保使用了变异方法修改数组
|
||||
- 对于非变异方法，使用新数组替换旧数组
|
||||
- 对象属性添加需要使用 `Vue.set`
|
||||
|
||||
2. **`v-if` 和 `v-for` 一起使用？**
|
||||
- Vue2 中不推荐同一元素使用两者
|
||||
- 解决方案：
|
||||
```html
|
||||
<template v-for="item in items">
|
||||
<div v-if="item.isVisible" :key="item.id">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
3. **如何获取当前元素？**
|
||||
- 通过事件传递：
|
||||
```html
|
||||
<div v-for="item in items" @click="handleClick(item)">
|
||||
```
|
||||
|
|
@ -0,0 +1,168 @@
|
|||
# Vue 2 中样式动态绑定和使用文档
|
||||
|
||||
在 Vue 2 中，动态绑定样式是非常常见的需求，可以通过多种方式实现。以下是详细的文档说明：
|
||||
|
||||
## 一、对象语法
|
||||
|
||||
### 1. 基本对象语法
|
||||
|
||||
```html
|
||||
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
|
||||
```
|
||||
|
||||
```javascript
|
||||
data() {
|
||||
return {
|
||||
activeColor: 'red',
|
||||
fontSize: 30
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 2. 样式对象直接绑定
|
||||
|
||||
```html
|
||||
<div :style="styleObject"></div>
|
||||
```
|
||||
|
||||
```javascript
|
||||
data() {
|
||||
return {
|
||||
styleObject: {
|
||||
color: 'red',
|
||||
fontSize: '13px'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 二、数组语法
|
||||
|
||||
可以将多个样式对象应用到同一个元素上：
|
||||
|
||||
```html
|
||||
<div :style="[baseStyles, overridingStyles]"></div>
|
||||
```
|
||||
|
||||
```javascript
|
||||
data() {
|
||||
return {
|
||||
baseStyles: {
|
||||
color: 'blue',
|
||||
fontSize: '14px'
|
||||
},
|
||||
overridingStyles: {
|
||||
color: 'red'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 三、自动前缀
|
||||
|
||||
当使用需要浏览器前缀的 CSS 属性时（如 `transform`），Vue 会自动检测并添加适当的前缀。
|
||||
|
||||
```html
|
||||
<div :style="{ transform: 'scale(' + scale + ')' }"></div>
|
||||
```
|
||||
|
||||
## 四、多重值
|
||||
|
||||
可以为样式属性提供包含多个值的数组，常用于提供多个带前缀的值：
|
||||
|
||||
```html
|
||||
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
|
||||
```
|
||||
|
||||
## 五、绑定 class
|
||||
|
||||
### 1. 对象语法
|
||||
|
||||
```html
|
||||
<div class="static" :class="{ active: isActive, 'text-danger': hasError }"></div>
|
||||
```
|
||||
|
||||
```javascript
|
||||
data() {
|
||||
return {
|
||||
isActive: true,
|
||||
hasError: false
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 2. 数组语法
|
||||
|
||||
```html
|
||||
<div :class="[activeClass, errorClass]"></div>
|
||||
```
|
||||
|
||||
```javascript
|
||||
data() {
|
||||
return {
|
||||
activeClass: 'active',
|
||||
errorClass: 'text-danger'
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 3. 在组件上使用
|
||||
|
||||
当在自定义组件上使用 `class` 属性时，这些类将被添加到该组件的根元素上，且不会覆盖已有的类。
|
||||
|
||||
```html
|
||||
<my-component class="baz boo" :class="{ active: isActive }"></my-component>
|
||||
```
|
||||
|
||||
## 六、计算属性绑定
|
||||
|
||||
对于复杂的样式逻辑，推荐使用计算属性：
|
||||
|
||||
```html
|
||||
<div :class="classObject"></div>
|
||||
```
|
||||
|
||||
```javascript
|
||||
computed: {
|
||||
classObject() {
|
||||
return {
|
||||
active: this.isActive && !this.error,
|
||||
'text-danger': this.error && this.error.type === 'fatal'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 七、注意事项
|
||||
|
||||
1. **浏览器兼容性**：Vue 会自动添加浏览器前缀，但仍需注意某些 CSS 属性在不同浏览器中的支持情况。
|
||||
|
||||
2. **性能考虑**：频繁修改样式绑定可能会影响性能，特别是在大量元素上使用时。
|
||||
|
||||
3. **优先级**：`:style` 和 `:class` 绑定的样式会与普通样式合并，`:style` 的优先级高于内联样式。
|
||||
|
||||
4. **CSS 变量**：Vue 2.6+ 支持 CSS 变量绑定：
|
||||
|
||||
```html
|
||||
<div :style="{'--color': themeColor}"></div>
|
||||
```
|
||||
|
||||
## 八、最佳实践
|
||||
|
||||
1. 对于简单的样式切换，使用对象语法
|
||||
2. 对于多个条件类，使用计算属性
|
||||
3. 避免在模板中写复杂的样式逻辑
|
||||
4. 考虑使用 CSS Modules 或 Scoped CSS 来管理组件样式
|
||||
|
||||
## 九、与 CSS 预处理器配合
|
||||
|
||||
Vue 支持与 Sass/SCSS、Less、Stylus 等预处理器一起使用：
|
||||
|
||||
```html
|
||||
<style lang="scss">
|
||||
$primary-color: #42b983;
|
||||
.text {
|
||||
color: $primary-color;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
Loading…
Reference in New Issue