- 博客(23)
- 收藏
- 关注
RSS订阅
原创 this.$set的使用
this.$set的使用我们在项目开发的过程中，经常会遇到为data中的某一个对象或者某一个对象数组每一项添加一个属性使用this.$set(obj, key, value)/vue.set(obj, key, value)<script>export default { data() { return { list: [{ name:'张三'，headimg:'1.png', },{ name:'李四'，headi
2020-11-20 09:43:44
1141
7
原创 swiper异形轮播
<!--在head中引入css--><link rel="stylesheet" href="../dist/css/swiper.min.css"><div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">1</div> <div class="swiper-slide">2</div&g.
2021-11-23 13:56:53
734
原创 a标签锚点链接
<a href="#one">one</a><a href="#two">two</a><a href="#three">three</a><div id="one">oneone</div><div id="two">two</div><div id="three">three</div>div{ width:100%; height:500px
2021-11-02 19:49:47
832
原创 微信打开页面，提示到浏览器上打开
<div class="mask_weixin"></div><script src="./js/jquery.js"></script><script> // 判断是否在微信打开 function isWeixin() { var nu = navigator.userAgent.toLowerCase(); if (nu.match(/MicroMessenger/i) == "micromessenger") { ret
2021-08-06 13:40:28
1348
1
转载 在App.vue或者main.js中如何获取组件实例
在App.vue或者main.js中如何获取组件实例const vm = new Vue()
2021-07-31 19:07:30
1005
原创 uniapp-防止连续多次点击（可以带一个参数或多个参数，一个页面可以使用多个，互不影响）
uniapp-防止连续多次点击function notMoreTap(means,clickName, ...data) {// means是点击后需要执行的方法// clickName是一个变量的名字控制是否是第一次点击// data是点击需要传的参数:用逗号隔开就可以，...为剩余运算符，除去前两位传的参数，剩下的传的参数都会留在data里 let that = this; if (that[clickName]) { // 第一次点击 that[clickName]=
2021-07-31 16:21:51
1988
原创 uni-app无限滚动
uni-app无限滚动<template> <view> <view class="roll"> <view class="roll_con"> <view class="roll_list" v-for="(item,index) in rollList" :key="index" :animation="animationData"> <view class="roll_dot"></view&
2021-06-24 11:26:25
2641
5
原创 vue2.xx与vue3.xx引入Element组件库
vue2.xx引入Element组件库npm 安装npm i element-ui -Simport Vue from ‘vue’;import ElementUI from ‘element-ui’;import ‘element-ui/lib/theme-chalk/index.css’;import App from ‘./App.vue’;Vue.use(ElementUI);new Vue({el: ‘#app’,render: h => h(App)});e
2021-03-20 15:24:53
191
原创 实现前一天后一天切换日期的效果
首先，分享一个方法：获取你参数的那年的那月有多少天new Date(year, month, 0).getDate();效果图（我没有做过多的样式）代码html<template> <view> <div class="content"> <div @tap="prev">前一天</div> <div> <picker mode="date" :value="date" @chan
2020-12-25 11:31:36
445
3
转载 element-ui官网上不存在的滚动条组件
element-ui官网上不存在的滚动条组件<template> <div style="height:600px;"> <el-scrollbar style="height:100%"> <div style="width:1200px;height:800px;margin:0 auto;" > 内容..... </div> </el-scrollbar>
2020-12-17 16:29:37
281
原创 使用transition制作头像边框，鼠标移入旋转效果
CSS3中的过渡Transition有四个中心属性：transition-propertytransition-durationtransition-delaytransition-timing（1）transition-propertynone：transition马上停止执行all：元素产生任何属性值变化时都将执行transition效果attr：指定要运动的样式（2）transition-durationtransition-duration是指定元素转换过程的持续时间..
2020-12-15 10:59:41
467
2
原创 js遍历对象方法
遍历对象Object.keys()let obj = { '111':'aaa', '222':'bbbb', '333':'cccc'};Object.keys(obj).forEach(key)=>{ console.log(key,obj[key]);});//结果//111 aaa//222 bbb//333 cccfor…in…let obj = { '111':'aaa', '222':'bbbb', '333':'cccc'};
2020-12-09 11:25:11
262
原创 VUE 使用 Element-UI组件el-upload上传图片预览
效果图上传后预览在el-upload组件中，把auto-upload设置为false，不会执行自动上传，给on-change一个触发事件getLocalImg，在getLocalImg方法中用于生成可用于本地预览的url代码如下：html<template> <div> <el-form> <el-form-item class="relese_nameP" label="LOGO："> <el-upload
2020-12-05 15:43:50
3202
2
转载 vue人机验证
vue-puzzle-vcodeVue 纯前端的拼图人机验证、右滑拼图验证安装npm install vue-puzzle-vcode --save使用<Vcode :show="isShow" @success="success" @close="close" />import Vcode from "vue-puzzle-vcode"; components: { Vcode},例子<template> <div> <
2020-12-04 14:44:12
1003
原创 vue基础知识
Vue与jQuery的区别jQuery是使用选择器选取DOM对象，对其进行赋值、取值、事件绑定百等操作，其实和原生的HTML的区别只在于可以更方便的选取度和操作DOM对象，而数据和界面是在一起的。比如需要获取label标签的内容：$(“lable”).val();,它还是依赖DOM元素的值。Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。这容就是MVVM。Vue与uni-ap
2020-11-24 14:25:40
223
3
转载 html页面填入字符串，\n换行不起作用，空格不保留，怎么办？
CSS white-space 属性在white-space属性中，有上图几个值可供选择，我们可以在DOM元素中使用white-space: pre-wrap;这样在html页面填入字符串，\n换行和空格就起作用了。
2020-10-13 19:02:23
1131
转载 HTML分享内容到QQ，微信，微博等平台,百度分享插件的相关参数
HTML分享内容到QQ，微信，微博等平台<!DOCTYPE html><html><head> <title>分享Share</title> <meta charset="utf-8" /></head><body><div class="bdsharebuttonbox" data-tag="share_1"> <a class="bds_tsina" data-cmd="t
2020-09-17 09:47:27
1035
原创 一个简易的html写的请求本地的json的小说查看
分享一个可以爬小说的软件下载:https://zi-o.lanzous.com/iZrBKgnjmuf 密码:7xbz（只不过只能爬笔趣阁的小说）（http://www.xbiquge.la/）使用方法找到笔趣阁文件夹下面的dist文件夹，进去双击笔趣阁.exe会出现一个类似cmd的一个框，在里面输入你在笔趣阁上找的小说的目录，然后回车，它会自己创建一个json文件，你爬的小说在里面一个简易的html写的请求本地的json的小说查看文件目录1.html<!DOCTYPE html
2020-09-15 19:44:33
608
转载 个性的音乐播放
HTML<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="js/index.css" /></head><body><textarea rows="30" cols="10" id="txt" styl
2020-09-15 10:15:12
119
转载 制作简单的日历
web页面中很多地方都会用到日历显示，选择等，本文用html、css、javascript实现简单的日历。完成以后的效果与页面左侧的效果差不多，可以切换上个月、下个月。也可以根据实际情况进行扩展。**html方面**html部分比较简单，声明一个div，具体的html用javascript生成。整体内容大概是这样的：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <lin
2020-09-14 15:34:41
701
转载 轮播图效果
#爆炸的轮播图html<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title></title> <style> *{margin:0;padding:0;} body{overflow:hidden;background-color:#000;} #box{width:640px;height:400px;border:1px soli
2020-09-09 11:42:28
150
转载 画板效果
画板<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style> *{margin:0;padding:0;box-sizing: border-box;} body{width:100vw;height:100vh;display:flex;flex-direction:column;justify-content:fl
2020-09-09 11:36:08
149
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人