您的位置：首页 > Web前端 > Vue.js

14-使用Vue来实现JQuery的动画效果

2019-06-27 12:10 726 查看
原文链接：http://www.cnblogs.com/Romantic-Blood/p/11096281.html

在学Vue之前学jQuery的时候，觉得jquery可能是最好用的，比JavaScript简洁了非常多，那段时间写的所有效果都用的jquery不管是轮播图还是页面效果，用jquery都可以轻松解决，但是随着Vue的学习，我发现代码可以越来越省，jquery还需要直接操作dom来改变具体样式，而Vue直接一个methods搞定，最直接的好处就是节省了大量的代码和时间。接下来用Vue实现了一个slideDown、slideUp和show、hide效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
</head>
<body>
<div id="app">
    <my-component></my-component>
</div>
<script>
    Vue.component("my-component",{
        props:['width'],
        template:
            `<div>
           <div :style="a" @mouseenter="handleA" @mouseleave="handleB"></div>
           <div :style="b"></div>
</div>`,
        data(){
            return{

                a:{
                    background:"deepskyblue",
                    width:"100px",
                    height:"60px",

                },
                b:{
                    background:"deeppink",
                    width:"100px",
                    height:"0",
                    opacity:"0",
                    transition:"all 5s",
                    // display:"none"
                },
            }
        },
        methods:{
            handleA(){
                this.$data.b.display="block",
                this.$data.b.height="500px",
                this.$data.b.width="100px",
                this.$data.b.opacity="1",
                this.$data.b.background="yellow"
            },
            handleB(){
                this.$data.b.display="hide",
                this.$data.b.height="0",
                this.$data.b.width="100px",
                this.$data.b.opacity="0",
                this.$data.b.background="red"
            }
        },
        computed:{

        }
    });
    new Vue({
        el:"#app",
        data:{

        }
    })
</script>

</body>
</html>

 

 

 

 

 

 

 




转载于:https://www.cnblogs.com/Romantic-Blood/p/11096281.html

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航