【Vue】用transition实现简单的添加删除动画效果

最新推荐文章于 2024-08-24 17:31:28 发布

XXch59

最新推荐文章于 2024-08-24 17:31:28 发布

阅读量1k

点赞数

分类专栏： Vue笔记文章标签： vue

本文链接：https://blog.csdn.net/XXch59/article/details/109519722

版权

本文介绍了如何在Vue中使用transition组件创建简单的添加和删除元素的动画效果，提供了相关HTML、Vue代码及CSS样式，帮助理解Vue的过渡动画机制。

摘要由CSDN通过智能技术生成

效果图

参考（过度&动画类）https://cn.vuejs.org/v2/guide/transitions.html 在这里插入图片描述

注意导入动画库

<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">

html和Vue代码

<div id="app">
            id：<input type="text" name="" id="" placeholder="请输入id" v-model="id">
            name：<input type="text" name="" id="" placeholder="请输入姓名" v-model="name">
            age：<input type="text" name="" id="" placeholder="请输入年龄" v-model="age">
            
            <button @click="add">添加</button>