vue
shyyly
毕业于黄淮学院,是一位前端开发工程师
展开
-
vue实现抽奖大转盘
1. 实现原理实际解决用户需求:当用户点击抽奖时,会请求接口获取中奖的奖品信息,前端根据中奖编号进行修改css样式,让转盘旋转,调整角度对应后端返回的奖品。如果抽奖有多次机会的话,每次需要抽奖结束后需要重置角度2.html 代码.wheel img.turntable( src='@/assets/img/second-anniversary/turntable.png' :style="{transform:'rotate('+rotateAngle+'deg)',tra原创 2021-08-03 16:21:22 · 2973 阅读 · 2 评论 -
eslint下载和安装
1.下载点击扩展然后输入eslint就可以了2. 配置安装好就可以可以看到这行代码copy到setting.json配置文件中点击图中的按钮选择设置点击打开配置文件复制代码就可以了3.最后看下启动eslint没有(你的vue项目中必须安装了eslint的包可以再package.json查看)注意解释一下文中可能还有一些细节没有解释到位,不清楚的可以评论或者私信我...原创 2020-12-04 15:57:35 · 1428 阅读 · 1 评论 -
v-model的使用
表单控件在实际开发中是非常常见的,特别是对于用户信息提交,需要大量的表单vue中使用v-model指令来实现表单元素和数据的双向绑定<input type = 'text' v-model='message'><h1>{{message}}</h1>data(){return {message:""}}v-model可以看成v-bind和v-on的结合<input type = 'text' :value='message' @input.原创 2020-07-16 17:50:52 · 313 阅读 · 0 评论 -
vue中那些处理数组的方法是响应式的
因为vue是响应式的,所以当数据发生改变,vue会自动检测数据变化,进行视图更新vue中包含一组观察数据编译的方法,使他们改变数组也是也会触发视图更新push()pop()shift()unshift()sort()reserve()splice()methods:{updateData(){//push方法this.arr.push(12)//popthis.arr.pop()//shiftthis.arr.shift()//sortthis.arr.sort().原创 2020-07-16 17:13:08 · 489 阅读 · 0 评论