VUE错误记录 - 小球模拟购物车
<body>
<div id="app">
<input type="button" value="Add to Cart" @click="flag=!flag"> <transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter">
<!-- 这里 @after-enter="afterEnter" 后面不要加括号。
不加括号，表示直接调用这个方法。
加括号 表示调用 方法的完成之后的取值。 -->
<div class="ball" v-show="flag"></div>
</transition>
</div> <script>
var vm = new Vue({
el:'#app',
data:{
flag: false, // 这里是布尔值，不是字符串，不要加引号。
},
methods: {
beforeEnter(el){
// el.style.transition = transform(0, 0);
el.style.transform = 'translate(0, 0)'
},
enter(el, done){
el.offsetWidth;
// el.style.transition = transform(100, 450);
// el.style.opacity = 0;
el.style.transform = 'translate(150px, 450px)';
el.style.transition = 'all 1s ease'; done();
},
afterEnter(el){
this.flag =! this.flag;
},
},
});
</script>
</body>
VUE错误记录 - 小球模拟购物车的更多相关文章
- vue 错误记录
1.错误信息: You may use special comments to disable some warnings.Use // eslint-disable-next-line to ign ...
- Vue 错误记录：Cannot read property 'beforeRouteEnter' of undefined
点击某路由链接,页面提示: Cannot read property 'beforeRouteEnter' of undefined 查看代码并无手写beforeRouterEnter设置, 把页面内 ...
- VUE错误记录 - 品牌后台练习 search(); 数组 splice forEach push 箭头函数
methods:{ add(){ var car = { id: this.id, name: this.name, ctime: new Date()}; this.list.push(car); ...
- vue错误记录
启动时报错如下 D:\QQFile\\FileRecv\industry_vue>cnpm run dev > vue_demo@ dev D:\QQFile\\FileRecv\indu ...
- 使用vue模拟购物车小球动画
使用vue模拟购物车小球动画 1.效果演示 2.相关代码 <!DOCTYPE html> <html lang="en"> <head> < ...
- Vue 问题记录
Vue 问题记录 汇总日常开发中遇到的关于vue的问题 VeeValidator 语言设置 校验消息默认是英文的,定义中文或其他语言的错误提示消息 import VeeValidate from 'v ...
- uploadify插件Http Error（302）错误记录（MVC）
由于项目(asp.net MVC)需要做一个附件上传的功能,使用的是jQuery的Uploadify插件的2.1.0版本,上传文件到自己项目指定的文件夹下面.做完之后,在谷歌上测试是正确的,在火狐上报 ...
- 开发错误记录8：Unable to instantiate application com
开发错误记录8:Unable to instantiate application com.android.tools.fd.runtime.BootstrapApplication 这是因为在And ...
- PHP 错误与异常 笔记与总结（5）配置文件中与错误日志相关的选项 && 将错误记录到指定的文件中
[记录错误(生产环境)] php.ini: ① 开启 / 关闭 错误日志功能 log_errors = On ② 设置 log_errors 的最大字节数 log_errors_max_len = 其 ...
随机推荐
- 会变得ActionBar,让你的ActionBar与众不同
话不多说先看两张图: github地址:https://github.com/Smalinuxer/android-SlideActionBar 原理什么的有时间再讲,或者自行看代码; 兴许还会补充新 ...
- android ViewPager实现 跑马灯切换图片+多种切换动画
近期在弄个项目.要求有跑马灯效果的图片展示. 网上搜了一堆,都没有完美实现的算了还是自己写吧! 实现原理利用 ViewPager 控件,这个控件本身就支持滑动翻页非常好非常强大好多功能都能用上它.利用 ...
- SQL Server 2008 R2 超详细安装图文教程及问题解决(锐姿公司安装）
问题点: 1.为了sqlserver与mysql 的安全,建议数据库低权限运行.禁止远程访问 1433与 3306端口等. 2.安装提示.net 3.5没有安装 ,在server2012的添加 3. ...
- 联想M4600 （110主板），安装正版win7 ，进入桌面后鼠标无法使用
问题:联想M4600 (110主板),安装正版win7 ,进入桌面后鼠标无法使用 原因: 110主板和win7系统问题,具体网上查询 处理: 修改bios 中 “USB Virtual KBS Sup ...
- Vue总结(一)
vue总结 构建用户界面的渐进式框架 渐进式:用到什么功能即可使用转么的框架子模块. 两个核心点 向应的数据绑定 当时图发生改变->自动跟新视图,利用Object.defindProperty中 ...
- sublime 编辑器汉化
一.下载Sublime编辑器 官网下载地址:http://www.sublimetext.com/3 二.下载汉化包 汉化包下载地址:http://files.cnblogs.com/akwwl/su ...
- Scrapy请求传参
scrapy.Request(url=url, callback=self.parse_item, meta={'item': item}, headers=headers) url: 要请求的地址 ...
- bzoj1084【SCOI2005】最大子矩阵
1084: [SCOI2005]最大子矩阵 Time Limit: 10 Sec Memory Limit: 162 MB Submit: 1946 Solved: 970 [Submit][id ...
- jQuery11 data() : 数据缓存
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- js---12数据类型,数据类型转换，NaN,
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...