vue.js入门六

最新推荐文章于 2024-06-12 08:41:10 发布

三宝鸭

最新推荐文章于 2024-06-12 08:41:10 发布

阅读量101

点赞数

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/qq_43542074/article/details/97411813

版权

前端专栏收录该内容

31 篇文章 1 订阅

订阅专栏

钩子函数实现列表动画

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vueStudy6</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- Vue 要实现异步加载需要使用到 vue-resource 库 -->
    <!-- vue-resource 依赖于 Vue ，所以先后顺序要注意 -->
    <!-- <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script> -->
    <link rel="stylesheet" href="css/animate.css" /> 
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        li{
            border:1px dashed #999;
            margin:5px;
            line-height:35px;
            padding-left:5px;
            font-size:20px;
            width:100%;
        }
        li:hover{
            background-color:pink;
            transition:all 0.8s ease;
        }
        .v-enter, .v-leave-to{
            opacity:0;
            transform:translateY(80px);
        }
        .v-enter-active, v-leave-active{
            transition:all 0.6s ease;
        }
        /* .v-move 和 v-leave-active 配合使用，能够实现列表后续的元素，渐渐地飘上来的效果 */
        .v-move{
            transition:all 0.6s ease;
        }
        .v-leave-active{
            position: absolute;
        }
    </style>
</head>
<body>  <!--利用钩子函数实现列表动画-->
    <div id="app">

        <div>
            <label >
                Id:
                <input type="text" v-model="id">
            </label>
            <label >
                Name:
                <input type="text" v-model="name">
            </label>

            <input type="button" value="添加" @click="add">
        </div>

        <!-- <ul> -->
            <!-- 在实现列表过渡的时候，如果需要过渡的元素，是通过 v-for 循环渲染出来的，不能使用 transition 包裹
            ，需要使用 transitionGroup-->
            <!-- 给 transition-group添加 appear属性，实现页面刚出来时的动画效果-->
            <!-- tag 属性指定把 appear 渲染成什么元素，如果不指定，则默认渲染为一个 span 标签 -->
            <transition-group appear tag="ul">
                <li v-for="(item,i) in list" :key="item.id" @click="del(i)">
                    {{item.id}} ---- {{item.name}}
                </li>
            </transition-group>
        <!-- </ul> -->
    </div>
    <script>

        //new 出来的这个vm对象就是 MVVM 中的VM调度者
        var vm = new Vue({
            el: '#app', 
            data:{
                flag:false,
                list:[
                    {id:1, name:'圆圆'},
                    {id:2, name:'峰峰'},
                    {id:3, name:'蓉蓉'},
                    {id:4, name:'娥娥'},
                ],
                id:'',
                name:''
            },
            methods:{
                add(){
                    this.list.push({id:this.id , name:this.name})
                    this.id = this.name = ''
                },
                del(i){
                    this.list.splice(i)
                }
            },
        });
    </script>

</body>
</html>

三宝鸭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue.js入门六

钩子函数实现列表动画<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta htt...
复制链接

扫一扫

专栏目录