【VUE】@click加上v-bind绑定切换类名及动画事件

最新推荐文章于 2023-03-19 10:07:44 发布

weixin_34004576

最新推荐文章于 2023-03-19 10:07:44 发布

阅读量449

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/code-klaus/p/9049883.html

本文介绍了一个使用Vue.js实现的动画案例，通过点击元素触发颜色变化及移动动画效果。利用v-bind绑定class并配合@click事件实现状态切换，展示了如何利用Vue的数据响应机制及动画样式实现交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

好长的名字。。。

效果是点击元素，通过改变类名的方式让其改变颜色+移动动画效果，这里用的是v-bind和@click

废话不说 show me the code！

  <div id="app">
        <div>
        <p :class='isOk?classA:classB' @click='ooo2()'>这是一个神奇的网站</p>
        </div>
    </div>

:class是 v-bind:class的缩写，给class绑定上事件，然后通过三元表达式判断事件

idOk是一个标志位，类似于第二篇博文写的flag，是判断符。

那么问题来了，它是怎么判断的呢？当时写时候本来想在oo2（）这个函数里写

//isOk?this.style.className='redd':this.className='blue'

非常辣鸡的写法。。。不知道是什么脑回路判断要绑定在class上用click判断isOK的值是真是假

var newv = new Vue({
    el:'#app',
    data:function (){
        return {isOk:false, classA:'redd',classB:'blue'} 
    },
    methods:{
        ooo2:function (){

            this.isOk = !this.isOk
            //isOk?this.style.className='redd':this.className='blue'
            console.log(this.isOk)
        }
    }
})

值得注意的是 data里面是给属性赋值，在methods方法里面才能调用到它。因为我刚上手vue，还没摸清楚什么里面写什么。。所以一开始就这几行代码搞了半天，尴尬惹

这里是动画样式

    .redd{
        color:red;
        font-size: 24px;
        position: absolute;
        top: 0;
        /*transition:all 1s ease;*/
        animation:mymove 1s;
        animation-fill-mode:forwards;

    }

    @keyframes mymove {
        from{left:0px;}
        to{left:100px;}
    }

    .blue{
        color: blue;
        font-size: 16px;
        position: absolute;
        top: 0;
        animation:mymove2 1s;
        animation-fill-mode:forwards;
    }

    @keyframes mymove2 {
        from{left: 100px}
        to{left:0px}
    }