【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}
}
以上是 【VUE】@click加上v-bind绑定切换类名及动画事件 的全部内容, 来源链接: utcz.com/z/380147.html