1. 过渡
页面
将需要做动画或过渡效果的内容，用transition包起来
transition-group包裹ul之类的多种元素的
<!-- 将需要做动画或过渡效果的内容，用transition包起来 -->
<transition name="box">
<div class="box" v-show="isShow">
<h2>看看效果</h2>
</div>
</transition>
<hr />
<!-- 给列表添加动画或过渡效果，用transition-group -->
<button @click="addGoods">添加</button>
<transition-group name="box" tag="ul">
<li v-for="(item, index) in goodses" :key="item.id">
{{ item.id }}--{{ item.name }}
<button @click="delGoods(index)">删除</button>
</li>
</transition-group>
样式
//进入时样式 和 离开时样式
.box-enter-active,
.box-leave-active {
transition: all 1s;
}
// 进入之前样式 和 离开之后样式
.box-enter,
.box-leave-to {
transform: translateX(10px);
opacity: 0;
}
2. nanoid
nanoid库和uuid库一样都可以生成uuid，但是nanoid相比uuid要更轻量级，下面就来演示一下如何在项目中使用nanoid。
1.在项目目录下打开终端，下载安装nanoid库
安装
npm install nanoid
导入
import { nanoid } from 'nanoid'
使用
this.goodses.push({
id:nanoid(),
name:'丰田'
})
