- 博客(38)
- 收藏
- 关注

原创 Vue-cli创建项目步骤
一. 使用 vue-cli 搭建项目下面整个过程是基于已经安装node.js和cnpm的基础上,node.js如何安装就不在这里详说了。如何全局化安装cnpm,这里简单提一下:npm install cnpm -g --registry=https://registry.npm.taobao.org其实对于安装vue-cli,使用npm命令和cnpm命令都是可以的,个人觉得使用npm安装的比较慢,而且很可能会因为网络问题而出错,所以还是觉得使用cnpm稳一点。(1)全局安装 vue-
2021-10-05 15:47:25
16174
原创 layui table template、或toolbar实现超出隐藏、更多展示全部效果
使用Layui table时,经常会使用template、或toolbar自定义模版属性。当使用该属性自定义HTML时,layui table 单元格原有的文本超出省略号隐藏功能,在该单元格讲不会生效。自定义html实现table单元格超出隐藏,提示框显示全部
2024-07-15 16:57:08
1763
原创 toggleAttribute() attr() prop() 复选框 全选 效果实现
但,实际运用当中,我们需要实现的效果,可能是这个样子的,如下图如果把 后面这些都放到label标签内,不是很现实。实例:需要实现的效果有:1)点击复选框项与 后面元素,check 的 true 和 false 效果切换2)点击 全选 按钮, 复选框项 切换3)已选择 数量 实现;
2023-05-18 13:55:23
207
原创 Layui datetime类型 去除秒
当 datatime类型时 extrabtns: [] 一定的加上 否则 选择时间按钮 不显示。当使用layui 时间控件时。
2023-05-11 10:57:19
425
原创 JQ、JS、模块化页面动态赋值CSS变量var(--xxx)
使用 CSS 变量 可动态更改主题颜色。原生JS 与 JQ 两种方法赋值CSS变量
2023-01-28 15:37:40
1194
原创 用CSS HTML 实现radio组的 自定义样式及效果
单选按钮组 纯html css 实现自定义效果label 用来和radio配合,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
2022-07-08 14:29:43
1489
原创 input type=“file” 获取文件名、文件类型、文件大小
input type=“file”获取文件名、文件大小、文件类型 将文件大小 改成KB 、MB 、 G 、 T 格式
2022-07-05 17:34:59
6531
转载 ES6 结构赋值、模板字符串、 Object.assign() 浅拷贝
ES6 结构赋值、模板字符串、 Object.assign() 浅拷贝,改变新变量的值,但是原始对象的属性也改变了
2022-06-28 15:33:30
491
原创 复制到剪贴板 并以HTML 格式粘贴
<div class="commonRow"> <p class="linkText">想要复制的内容<p> <span onclick="copyText(this)">复制</span><div> function copyText(e){ var text = $(e).parents('.commonRow').find('.linkText').text(); ...
2022-05-11 14:31:28
788
原创 input 输入监听以及关闭按钮隐藏
<div class="forFlex searchPerson"> <div class="forFlex"> <i class="searchPersonBtn"></i> <input type="text" class="inputPerson" placeholder="请输入成员或部门"> </div> <i class="searchPers...
2022-04-27 11:33:58
453
原创 下拉菜单一级菜单与二级菜单中间有空隙
有的时候,在写一级菜单与二级菜单的时候,两个菜单的布局并不是挨着的,中间会因为样式设置,会产生一点高度差,但这种情况很容易在一级菜单获取焦点时二级菜单显示,而一级菜单一失去焦点,二级菜单也跟着消失,这样就点不到二级菜单,不能对二级菜单进行选择,这时脚本的写法可以如下展示: <div class="topDiv"> <p id="logoImg"><a href="../index.htm"><img src="../s.
2022-04-21 11:00:47
795
原创 Vue Props是什么
props相当于一个组建的输入,和JS中function(a,b){}中的a和b很像,是一种参数如图展示 const foo={ props:['title'], template:'<div>局部组件{{title}}</div>', }; const a=new Vue({ el:'#app', components:{foo}, template:'&l
2022-02-23 17:51:38
3302
原创 vue 组件生命周期
所有生命周期钩子的this上下文将自动绑定至实例中,因此你可以访问 data、computed 和 methods。这意味着你不应该使用箭头函数来定义一个生命周期方法(例如created: () => this.fetchTodos())。因为箭头函数绑定了父级上下文,所以this不会指向预期的组件实例,并且this.fetchTodos将会是 undefined。组件生命周期分为11种:1)创建beforeCreate、created2)挂载beforeMount...
2022-02-23 14:42:55
728
原创 Vue 组件全局注册与局部注册
实现以下效果Html<div id='app'></div>Js //局部注册 let fot={ data(){ return{ count:0, } }, template:'<div>foot {{count}}<button @click="count++">点.
2022-02-23 12:13:43
1037
原创 vue实现对数据的渲染和删除
实现如下页面效果:页面样式: <style> *{padding:0;margin: 0;} tr{line-height: 40px; } th,td{text-align: center; border: 1px solid #ccc;} ul{width:12.5rem; box-sizing: border-box; display: -webkit-box; -webkit-box-orient:horizontal; -we
2022-02-23 10:45:20
1195
原创 简易水果购物车效果实现与reduce()函数累加器
<div id="fruit"> <ul> <li v-for="item in products"> {{item.name}}--{{item.count}} <span v-show="item.count==0">卖没啦</span> <button @click="item.count++"&g.
2022-02-21 16:41:28
382
原创 VUE循环 排序 多条件判断添加样式
1.使用v-for对数据进行渲染并按照语文成绩从高到低进行排序<div id="sorting"> <table> <tr v-for="(item,index) in sortScore"> <td>{{index}}</td> <td>{{item.name}} </td
2022-02-21 15:00:28
1550
原创 从本地引用VUE
1.切换目录2.创建文件夹3.初始化项目执行命令npm init -y路径选错了应该是E:\VueSpace\vue_two>npm init -y ,领会精神执行结果:文件夹里会写入这么一个文件4.通过npm安装vue执行命令npm i vue执行结果5.需要引用的vue.js位置如图...
2022-02-21 14:37:05
897
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人