【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}
    }