【VUE】@click加上v-bind綁定切換類名及動畫事件

好長的名字。。。vue

效果是點擊元素，經過改變類名的方式讓其改變顏色+移動動畫效果，這裏用的是v-bind和@clickapp

廢話不說 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（）這個函數裏寫this

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

很是辣雞的寫法。。。不知道是什麼腦回路判斷要綁定在class上用click判斷isOK的值是真是假 spa

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，還沒摸清楚什麼裏面寫什麼。。因此一開始就這幾行代碼搞了半天，尷尬惹code

這裏是動畫樣式blog

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