好长的名字。。。

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

废话不说 show me the code！

     
        
      
        
       
这是一个神奇的网站
        
      
    
     

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