效果图：案例中四个按钮 当我们点击 第一个或者第二个时 方块都会进行一个位置互换 并且顶部的数字 会移动到最低部  当点击第三个按钮时 图中的方块 会以中间的方块为中心 进行对角互换位置  第四个按钮则是对四个对角位置的方块 进行一个位置互换html：css：方块我们可以通过弹性布局 进行水平垂直居中 和排列 然后通过给transform添加transition动画达到我们点击时 的动画效果   &nbsp

        效果图：在案例中 我们通过点击按钮将对应的颜色进行筛选展示出来 并且使用vue中transition-group 进行过渡动画设置在根实例data中将需要的颜色以及其他数据准备好 const app = new Vue({     el: "#app",   &n

         效果图:案例中的俩种颜色的小圆球 旋转效果图 我们通过vue去动态的创建节点 通过添加关键帧动画让它进行旋转 以及缩放现在根实例中创建一个空数组为items然后在钩子函数中对items进行赋值 new一个数组对象  通过获取文档宽度除以70 来获取一个值 作为数组的值最后我们只要将items数组在试图从中 进行遍历 并且内部写入俩个div 作为俩种不同的圆球 分别给它们设置好延时完整代码：<!DOCTYPE&nb

        效果图：在案例中通过去点击按钮 进行页面的切换 并且当页面在切换的同时 进行一个动画的渲染加载首先我们需要去创建俩个页面组件 分别是start和next 在给组件中的按钮 通过点击向父组件进行数据传递 <template id="start">       <div class="start"&

      效果图：通过点击设置默认地址之后 将当前点击的列表移动到顶部 进行默认设置首先在创建的实例的data中 写好静态的数据 const app = new Vue({     el: "#app",     data() {      &nb

             效果图：当鼠标按下按钮时 按钮文本会发生变化 并且 上面的能量条 会进行充能  每个阶段的充能颜色条不同 当松开时 能量条进行衰减 火箭进行加速先创建一个vue实例 在数据中心中 将我们需要的变量数据写好当我们按下按钮时 给对应绑定是事件进行处理视图层：首先将开关设置为true 文本改为充电中 拿到数据中心的powerUp设置为间隔定时器 每100ms 计数器charge++一次当我们松开的

             效果图：在效果中可以清晰的看见 当鼠标移动到柱形图上面的时候 会显示 当前柱形图的全部信息 并且在右上角给三种状态设置了对应的按钮 可以自由的去操控 向显示对比的内容html：主要载具还是myChart盒子data中需要准备的数据 主要的时当前 柱形图中各个部门 以及反馈 未反馈 超时反馈三个数组声明一个方法 在内部去初始化echarts表格 并配置基本绘制图标：柱形图的排列方向以及四边边界等x轴与y

    效果图：效果中 点击上传区域  将文件夹打开 选中图片 点击确定 进行图片上传并且在页面中 可以对上传的图片展示 展示区域 对图片名称进行显示 包括右侧点击删除 以及在上传完图片 对图片的总数 以及大小进行统计html：    <div id="app">       <div class=&

     效果图：通过点击左右按钮 对卡片进行移动 当卡片左边或者右边到底时 给按钮进行disabled 进行禁用设置html： <template id="rollImg">       <div class="card-wrapper">       

   效果图： 在案例可以看见 单纯的一种类型的密码显示较弱  俩种不同类型设置成的密码强度一般 只有三种不同类型的字符组合成的密码 显示较强 这里我们可以通过正则去判断强度html：在数据中心将v-model绑定的password以及span标签需要遍历的强度数组设置好css中对于达到强度 需要高亮显显示的样式 设置好 并且 每一个强度的背景颜色 所以进行单独设置 动画渲染通过before以及动画来实现 .list span