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 = 其 ...
随机推荐
- android-继承BaseAdapter--自己定义适配器,getView运行多次的解决方法
定义的getView运行多次的ListView布局: <ListView android:id="@+id/lv_messages" android:layout_width ...
- caioj1443:第k小的数Ⅲ
[传送门:caioj1443] 简要题意: 给出一颗n个点的树,给出每个点的权值,再给出n-1条边,有m个询问,每个询问输入x,y,k,输出第x节点到第y节点的路径上第k大的点 题解: 这是一道主席树 ...
- Android Design Support Library(一)用TabLayout实现类似网易选项卡动态滑动效果
这里我们用TabLayout来实现这一效果.TabLayout是Android Design Support Library库中的控件.Google在2015的IO大会上,给我们带来了更加详细的Mat ...
- 如何快速复制Windows警告提示消息对话框内容
凡是使用过计算机的朋友,都遇到过系统发出的警告提示消息对话框,如图所示. 哇!好长的一串英文错误警告,这要手写到什么时候呢?不!现在不用这么麻烦了. 你只要鼠标选中这个提示框Ctrl+C,然后打开你的 ...
- 在C# 获取当前应用网址
/// <summary> /// 获取当前应用网址 /// </summary> /// <returns></r ...
- Codefroces 822C Hacker, pack your bags!
C. Hacker, pack your bags! time limit per test 2 seconds memory limit per test 256 megabytes input s ...
- selenium与phantomjs简单结合
selenium工具安装 Windows安装pip install selenium Linux安装apt-get install selenium 查看selenium支持的浏览器from sele ...
- jQuery获取区间随机数
1.自定义函数 function getRandom(min,max){ //x上限,y下限 var x = max; var y = min; if(x<y){ ...
- [Parcel] Bundle a React App with Parcel
Parcel comes in as the new cool kid in the bundlers world. Unlike other bundlers which take lots of ...
- 获取个人借阅信息---图书馆client
在上一篇利用jsoup解析个人信息----图书馆client,获得个人基本信息后.便有了进一步的需求:获取当前借阅的具体信息 获取的方法还是一样的.利用jsoup解析借阅信息页面,获得所需数据,封装成 ...