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