zoukankan      html  css  js  c++  java
  • 【VUE】@click加上v-bind绑定切换类名及动画事件

    好长的名字。。。

    效果是 点击元素,通过改变类名的方式让其改变颜色+移动动画效果,这里用的是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}
        }
  • 相关阅读:
    datanode报错Problem connecting to server
    使用命令查看hdfs的状态
    Access denied for user root. Superuser privilege is requ
    ElasticSearch默认的分页参数 size
    SparkStreaming Kafka 维护offset
    【容错篇】Spark Streaming的还原药水——Checkpoint
    251 Android 线性与相对布局简介
    250 Android Studio使用指南 总结
    249 如何解决项目导入产生的中文乱码问题
    248 gradle更新问题
  • 原文地址:https://www.cnblogs.com/code-klaus/p/9049883.html
Copyright © 2011-2022 走看看