【VUE】@click加上v-bind绑定切换类名及动画事件

vue

好长的名字。。。

效果是 点击元素,通过改变类名的方式让其改变颜色+移动动画效果,这里用的是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

回到顶部