案例详解
crystal_iwwish
多读书 多看日出
展开
-
Vue登录路由守卫
假设,admin 密码123456 就可以跳转到主页路由的安装与配置:详情跳转源代码:路由器配置页面import Vue from 'vue'import VueRouter from 'vue-router'import Mylogin from '../components/MyLogin.vue'Vue.use(VueRouter)const router = new VueRouter({ // 路由规则的数组 routes routes: [ { pat.原创 2021-11-28 10:32:51 · 1246 阅读 · 0 评论 -
Vue实现按钮和文本框的切换
案例:▲注意点解析:为什么使用 this.$nextTick( )?组件的 $nextTick(cb) 方法,会把 cb 回调推迟到下一个 DOM 更新周期之后执行。通俗的理解是:等组件的DOM 更新完成之后,再执行 cb 回调函数。从而能保证 cb 回调函数可以操作到最新的 DOM 元素。因为vue是异步的,所以说执行this.flag=false 指令时,页面还没有渲染,我们要等页面渲染后才能进行 获取Dom元素并且聚焦为什么使用箭头函数?箭头函数没有自己的this,它的this就是箭原创 2021-11-27 22:22:14 · 1448 阅读 · 1 评论 -
jQuery微博登录
如图所示,共有三种登录方式分析:1.点击账号登录或者安全登录,有下边框为橙色的样式2.对应的内容改变HTML 和 CSS代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>练习 -.原创 2021-10-22 20:47:08 · 196 阅读 · 0 评论 -
jQuery实现tab栏转换
如图所示,通过jQuery实现tab栏转换分析:1.鼠标点击导航,只有当前被点击的导航出现背景颜色(排他思想)2.当前被点击导航的内容更改用到的方法有:siblings:查找兄弟元素addClass:添加类名removeClass:删除类名index:当前元素下标值eq:根据索引值筛选某一个元素HTML和CSS代码 <!DOCTYPE html><html lang="en"><head> <meta charset="U.原创 2021-10-22 20:38:05 · 188 阅读 · 0 评论 -
动态创建表格(各种管理系统常见)
该案例实现的功能有功能1.将后端默认数据添加进去功能2.录入按钮点击之后,将其信息插入到表格中功能3.删除操作▲注意:数据不管是添加还是删除完,都需要重新渲染功能1.将后端默认数据添加进去 let arr = [ { stuId: 1001, uname: '欧阳霸天', age: 19, gender: '男', salary: '20000', city: '上海' }, { stuId: 1002, uname: '令狐霸天', age: 29, g..原创 2021-10-11 16:16:43 · 424 阅读 · 0 评论 -
发布评论案例详解
该发布评论所要实现的功能有:1.文本框输入文字,对应的文字字数改变2.点击发布,可以将评论按一定的形式发布3.点击删除,可以进行删除操作首先是功能1.文本框输入文字,对应的文字字数改变// *****************输入文字改变字数*********************** // 1.获取标签(点击什么 什么改变都需要获取) let area = document.querySelector("#area"); let useCount = d..原创 2021-10-11 15:26:31 · 399 阅读 · 0 评论