【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:;
/*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:;
animation:mymove2 1s;
animation-fill-mode:forwards;
} @keyframes mymove2 {
from{left: 100px}
to{left:0px}
}
【VUE】@click加上v-bind绑定切换类名及动画事件的更多相关文章
- Vue中,给当前元素添加类名移除兄弟元素类名的方法
在Vue中,给当前元素添加类名移除兄弟元素类名的方法 今天在项目中需要做一个效果,点击对应的li改变当前的color,其他的li取消颜色,在jQuery中这很容易,由于之前已经引入了jQuery,所以 ...
- 黑马vue---46、vue使用过渡类名实现动画
黑马vue---46.vue使用过渡类名实现动画 一.总结 一句话总结: vue动画的过渡类名的时间点中没有设置样式的话就是默认的样式 使用 transition 元素,把 需要被动画控制的元素,包裹 ...
- jquery中bind()绑定多个事件
bind()绑定事件 $(selector).bind(event,data,function): 参数event为事件名称(如"click,mouseover....."),da ...
- 背水一战 Windows 10 (22) - 绑定: 通过 Binding 绑定对象, 通过 x:Bind 绑定对象, 通过 Binding 绑定集合, 通过 x:Bind 绑定集合
[源码下载] 背水一战 Windows 10 (22) - 绑定: 通过 Binding 绑定对象, 通过 x:Bind 绑定对象, 通过 Binding 绑定集合, 通过 x:Bind 绑定集合 作 ...
- 背水一战 Windows 10 (21) - 绑定: x:Bind 绑定, x:Bind 绑定之 x:Phase, 使用绑定过程中的一些技巧
[源码下载] 背水一战 Windows 10 (21) - 绑定: x:Bind 绑定, x:Bind 绑定之 x:Phase, 使用绑定过程中的一些技巧 作者:webabcd 介绍背水一战 Wind ...
- 绑定: x:Bind 绑定, x:Bind 绑定之 x:Phase, 使用绑定过程中的一些技巧
背水一战 Windows 10 之 绑定 x:Bind 绑定 x:Bind 绑定之 x:Phase 使用绑定过程中的一些技巧 示例1.演示 x:Bind 绑定的相关知识点Bind/BindDemo.x ...
- 绑定: 通过 Binding 绑定对象, 通过 x:Bind 绑定对象, 通过 Binding 绑定集合, 通过 x:Bind 绑定集合
背水一战 Windows 10 之 绑定 通过 Binding 绑定对象 通过 x:Bind 绑定对象 通过 Binding 绑定集合 通过 x:Bind 绑定集合 示例1.演示如何通过 Bindin ...
- vue 如何在循环中绑定v-model
vue 如何在循环中绑定v-model 我现在有这么一个需求,页面上有多项输入框,但是具体有多少项,我也不知道,它是通过"新增一项"按钮点击事件,点击一下,就新增一项:如下图这个样 ...
- 第11课 std::bind和std::function(2)_std::bind绑定器
1. 温故知新:std::bind1st和std::bind2nd (1)bind1st.bind2nd首先它们都是函数模板,用于将参数绑定到可调用对象(如函数.仿函数等)的第1个或第2个参数上. ( ...
随机推荐
- Duilib Edit编辑框禁止输入中文的方法
转载:http://www.myexception.cn/vc-mfc/300749.html 编辑框是供用户输入的,但有时候我们要限制用户输入的内容,比如我们不让用户输入中文,只能输入字符和数字,因 ...
- Razor语法快速参考
语法/示例 Razor Web Forms对应写法或说明 代码块 @{ int x = 123; string y = "because.";} <% int x = 123 ...
- 【LTE基础知识】SGLTE, SVLTE, CSFB, VoLTE【转】
本文转载自:https://blog.csdn.net/henryghx/article/details/18416405 4G网络下实现语音通话功能的技术共有三种——VoLTE.SGLTE(GSM ...
- ubuntu下转换flv格式为mp4格式
一.环境 ubuntu 16.04 二.安装工具 sudo apt install libav-tools 三.开始转换 avconv -i input.flv -codec copy output. ...
- windows的gvim总是报错: +iconv fencview.vim
iconv是用来转换gvim文件的编码的, 需要插件: iconv.dll gvim7.3的文件目录结构: vim/vim73是它的核心文件, 而vimfiles是扩展文件, 里面的plugin是专门 ...
- UVa 10201 Adventures in Moving - Part IV
https://vjudge.net/problem/UVA-10201 题意: 给出到达终点的距离和每个加油站的距离和油费,初始油箱里有100升油,计算到达终点时油箱内剩100升油所需的最少花费. ...
- 【转】Windows Server 2008 R2怎样设置自动登陆
Windows Server 2008 R2是一款服务器操作系统,提升了虚拟化.系统管理弹性.网络存取方式,以及信息安全等领域的应用,Windows Server 2008 R2也是第一个只提供64位 ...
- Linux内核的五大模块
Linux内核的五大模块 (转自)https://blog.csdn.net/huangjingbin/article/details/19396235 Linux内核的五大模块 1.进程调度模块 2 ...
- H5图片预览、压缩、上传
目标实现: 1.选择图片, 前端预览效果 2.图片大于1.2M的时候, 对图片进行压缩 3.以表单的形式上传图片 4.图片删除 预览效果图: 代码说明: 1.input:file选择图片 <!- ...
- ubuntu16.04上安装tomcat7
sudo apt-get update sudo apt-get install tomcat7 启动:sudo service tomcat7 start 访问http://127.0.0.1:80 ...