vue指令-- v-for 和 样式处理
v-for
基本使用
v-for 作用: 遍历对象和数组
- 遍历数组 (常用)
v-for="item in 数组名" item每一项
v-for="(item, index) in 数组名" item每一项 index下标
注意：item和index不是定死的，可以是任意的名字，但是需要注意 第一项是值 第二项是下标
- 遍历对象 (一般不用)
<!--
v-for也可以遍历对象（不常用）
v-for="(值, 键) in 对象"
-->
<ul>
<li v-for="value in user" :key="value">{{value}}</li>
</ul>
<ul>
<li v-for="(value, key) in user" :key="key">{{value}} ---{{key}}</li>
</ul>
- 遍历数字
<!--
遍历数字
语法： v-for="(item, index) in 数字"
作用：遍历具体的次数 item从1开始 index下标从0开始的
-->
<ul>
<li v-for="(item, index) in 10" :key="item">{{item}} ---{{index}}</li>
</ul>
虚拟DOM 和 diff算法
vue就地复用策略： Vue会尽可能的就地（同层级，同位置），对比虚拟dom，复用旧dom结构，进行差异化更新。
虚拟dom: 本质就是一个个保存节点信息, 属性和内容的 描述真实dom的 JS 对象
diff算法：
-
策略1：
先同层级根元素比较，如果根元素变化，那么不考虑复用，整个dom树删除重建
先同层级根元素比较，如果根元素不变，对比出属性的变化更新，并考虑往下递归复用。
-
策略2：
对比同级兄弟元素时，默认按照下标进行对比复用。
对比同级兄弟元素时，如果指定了 key，就会 按照相同 key 的元素 来进行对比。
v-for 的key的说明
-
设置 和 不设置 key 有什么区别？
- 不设置 key， 默认同级兄弟元素按照下标进行比较。
- 设置了key，按照相同key的新旧元素比较。
-
key值要求是
- 字符串或者数值，唯一不重复
- 有 id 用 id, 有唯一值用唯一值，实在都没有，才用索引
-
key的好处
key的作用：提高虚拟DOM的对比复用性能
只要是写到列表渲染，都推荐加上 key 属性。且 key 推荐是设置成 id， 实在没有，就设置成 index
样式处理
v-bind 对于class的增强
v-bind 对于类名操作的增强, 注意点, :class 不会影响到原来的 class 属性
:class="对象/数组"
<template>
<div>
<!--
v-bind： 作用：设置动态属性
v-bind针对 class和style 进行增强
允许使用对象或者数组
对象：如果键值对的值为true，那么就有这个，否则没有这个类
数组：数组中所有的类都会添加到盒子上
-->
<!-- <div class="box" :class="isRed ? 'red': ''">123</div> -->
<!-- <div class="box" :class="{red: isRed, pink: isPink}">123</div> -->
<div class="box" :class="arr">123</div>
</div>
</template>
v-bind对于style 的增强
<template>
<div>
<!--
:style也可以使用对象或者数组
-->
<div class="box" :style="[styleObj1, styleObj2]">123</div>
</div>
</template>
处理日期格式
- 安装moment
yarn add moment
- 引入moment
import moment from 'moment'
- 定义格式化时间的函数
methods: {
// 格式化时间
formatDate(input) {
return moment(input).format('YYYY-MM-DD HH:mm:ss')
}
}
- 页面中格式化使用
<td>{{ formatDate(item.date) }}</td>
