vue_列表动画

Posted 2021-05-23 Hhhr

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue_列表动画相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表动画</title>
    <style type="text/css">
        .v-enter,.v-leave-to{
            opacity: 0;
            transform:translateY(100px);
        }
        .v-enter-active,.v-leave-active{
            transition: all 1s ease;
        }
        li{
            border:1px dashed orange;
            margin:5px;
            padding-left:5px;
            font-size: 20px;
            width:100%;
            line-height:30px;
        }
        li:hover{
            background-color: #feddbe;
            transition: all 0.8s ease;
        }
    </style>
</head>
<body>
    <!-- 输入id和name区域 -->
    <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>
        <!-- 显示列表数据 -->
        <transition-group appear tag="ul">
            <li v-for="(item,index) in list" :key="item.id" @click="del(index)">
                {{index}}---{{item.id}}---{{item.name}}
            </li>
        </transition-group>
    <div>
</body>
    <!--1、导入vue包-->
    <script src="./js/vue.min.js"></script>
    <!--2、创建vue实例（new对象）-->
    <script type="text/javascript">
        var vm = new Vue({
           el:\'#app\',
           data:{
               id:"",
               name:"",
               list:[
                   {id:1,name:\'贾宝玉\'},
                   {id:2,name:\'林黛玉\'},
                   {id:3,name:\'薛宝钗\'},
                   {id:4,name:\'王熙凤\'},
               ]
           },
           methods:{
                add(){
                    this.list.push({id:this.id,name:this.name})
                },
                del(index){
                    this.list.splice(index,1)
                }
           }
        })
    </script>
</html>