前端小例子
Krismiling
努力长成自己想要的样子,打工狗
展开
-
JavaScript的深浅拷贝
首先,要知道基本类型是没有深浅拷贝之分的,因为基本类型在进行复制时,就是将值直接复制给另一个; 而引用类型在进行复制时,由于占用内存比较大,只会复制引用地址,相当于复制只是共用了同一个对象/数组。 这样我们在更改一个时,另一个对象/数组就会跟着发生变化,如果我们不想要这种效果,就需要对其进行完全复制,使两个对象不再共用同一个对象/数组,相当于只是把一个对象/数组的值赋值给另一个对象/数组。 浅拷贝:只进行浅层的复制,只复制一层,更深层的数据发生改变另一个对象还是会发生改变。 使用for/in方式。 le原创 2022-01-31 16:37:13 · 784 阅读 · 0 评论 -
原生JavaScript全选、全不选、反选实例
全选:用户点击,在标签上添加已选中的属性,即checked = true。 全不选:用户点击,在标签上移除checked的属性,即checked=false。 反选:用户点击,使用户原先点击的变为不点击的,用户原先不点击的变为点击的,即checked=!checked。 三者所做操作基本一致,考虑封装为函数作为后续使用。 页面布局:后续可换成任何自己需要的布局。 <form> <div><input type="checkbox">多选1</div> &l原创 2022-01-31 16:05:33 · 351 阅读 · 0 评论 -
动态路由简单示例
路由router.js import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) //常规路由,一开始即可访问的路由 export const constantRoutes = [ { path: '/login', component: ()=>import('../views/Login.vue') }, { path: '/register', component: ()=>原创 2021-10-07 21:24:57 · 251 阅读 · 0 评论 -
vue的组件及其传值
定义:组件是vue中最强的功能,可以扩展HTML,封装重用的代码。 重要性:vue的核心之一,所有的页面基本都是通过组件来管理的。 组件传值:当组件过多时如何进行参数的传递很重要。 父组件传参到子组件 不同的页面有多个按钮,各个按钮的名称可能是不一样的,样式也可能是不一样的,调用的函数也会是不一样的。写一个组件,根据传入不同来实现上述效果。 传入不同的名称 index.vue <Btn :title="'修改'"/> Btn.vue <button>{{title}}</b原创 2021-12-05 16:14:56 · 280 阅读 · 0 评论 -
原生JS实现放大镜效果(HTML、CSS、JavaScript)
效果如下: 首先分析一下布局。如下图所示,先有一个红色的大盒子作为整体的容器;蓝色为红色大盒子里的容器,左边为一开始的图片放置的容器,右边为经过放大后的处理效果图片的放置容器;左右蓝色容器里,绿色代表放置的图片;黄色盒子是滑块的盒子,应与图片是属于同一级的。 <!--外层容器--> <div id="box"> <!--左侧图片容器--> <div class="small"> <!--滑块--> <div class="sl原创 2022-01-21 18:31:43 · 1451 阅读 · 0 评论 -
原生JavaScript随机抽奖案例
案例需求:抽奖机中有多个不同的奖项,点击按钮开始进行随机抽奖,默认所有的奖项得到的概率是一致的。 页面布局:大致布一下,可根据喜好进行调整。 <div> <div class="awards">特等奖</div> <div class="awards">一等奖</div> <div class="awards">二等奖</div> <div class="awards">三等奖</div>原创 2022-01-27 14:10:16 · 1725 阅读 · 0 评论