LONGYog-优快云博客

原创 Vue + elementui实现分页查询(选中后跳转回来仍然是保持选中状态回显)

Vue + elementui实现分页查询(选中后跳转回来仍然是保持选中状态回显)1.前言最近要实现列表分页查询效果，分页跳转是实现了，可是分页跳转回来后，之前选中的状态就没了，于是上网查了一下，发现可以通过数组来存储id来实现保持选中状态回显，从而实现分页跳转后，跳转回来复选框还是勾选上的2.实现效果如图：3.代码HTML：<template> <div> <div style="background-color: #f4f4f4;ma

2022-05-30 17:52:07 2053

原创 Vue 实现复选框全选，反选，单选，多选(简易版)

Vue 实现复选框全选，反选，单选，多选(简易版)实现效果，如图：HTML代码：<template> <div> <div style="background-color: #f4f4f4;margin:50px 0 0 260px;width:900px;height:500px;padding:50px"> <ul style="list-style: none"> &

2022-05-23 15:51:37 8004 5

原创 Vue 实现所有商品分类抽屉式效果，下拉效果，回收效果(动效)

Vue 实现所有商品分类抽屉式效果(动效)实现效果：点击分类名，下拉显示子分类，再点击则回收。如图：HTML代码：<template> <div> <div style="background-color: #fff;margin:50px 0 0 260px;width:900px;height:900px;padding:50px"> <div> <ul clas

2022-05-19 11:14:15 3012 2

原创 vue elementui el-tabs 底部的下划线和切换时的下划线移动到上方

Vue Elementui el-tabs 底部的下划线和切换时的下划线移动到上方实现效果如图：代码：<template> <div> <div style="background-color: #f4f4f4;margin:50px 0 0 260px;width:900px;height:600px;padding:50px"> <el-tabs v-model="activeName">

2022-05-16 08:57:28 2683

原创 Vue 实现前端银行卡隐藏中间的数字，及隐藏姓名后两位

Vue 实现前端银行卡隐藏中间的数字主要应用了 filters过滤器来实现效果实现效果，如图：HTML代码：<template> <div> <div style="background-color: #f4f4f4;margin:50px 0 0 460px;width:900px;height:300px;"> <p>原来：{{ cardNo }}</p> &l

2022-05-09 09:10:57 1782

原创 Vue 日期格式化年月日，时分秒

Vue 日期格式化年月日，时分秒实现效果，如图：HTML代码：<template> <div> <div style="background-color: #f4f4f4;margin:50px 0 0 460px;width:500px;height:500px;"> <p>原日期：{{ time }}</p> <p>改变后(xxxx年xx月xx日)：{{ Ob

2022-05-07 16:12:38 1326

原创 Vue 实现截取网络地址字符串携带的参数

Vue 实现截取网络地址字符串携带的参数实现效果，如图：HTML代码：<template> <div> <div style="background-color: #f4f4f4;margin:50px 0 0 460px;width:900px;height:300px;"> <p>截取前：{{ testurl }}</p> <p>截取后(转为对象)：{{

2022-05-03 22:30:00 709

原创 Vue + elementui 实现文本内容复制（简易版）

1.需求点击实现复制文本内容2.实现效果HTML代码：<template> <div> <div style="background-color: #f4f4f4;margin:50px 0 0 460px;width:500px;height:300px;"> <el-input v-model="content"></el-input> <p>{{ c

2022-05-03 10:00:00 2094

原创 Vue 将对象转换成字符串（去除对象中的花括号和双引号）

Vue 将对象转变成字符串输出实现效果，如图：HTML代码：<template> <div> <div style="background-color: #f4f4f4;margin:50px 0 0 460px;width:500px;height:300px;"> <p>原对象：{{ testObj }}</p> <p>改变后：{{ tempObj }}

2022-04-28 10:52:59 13768

原创 Vue+elementui实现点击切换登录方式(超简单)

1.前言使用Vue + elementui实现切换登录方式，新手党！！！2.需求点击按钮切换账号登录或短信登录方式3.实现效果如图所示：HTML代码：<template> <div style="min-height:800px;padding: 100px 0 0 640px;background-color:#f4f4f4"> <div class="login_box"> <p class="lo

2022-04-26 16:28:40 3932 1

原创 Vue 使用Cookies实现商品搜索历史记录

Vue 使用Cookies实现商品搜索历史记录需求用户搜索商品，我们需要把用户输入的词语存储到搜索历史并展示tip：存储不知道存储到哪里，所以我想到了用cookies存储到客户端1.前言vue使用cookie，需先安装cookies插件，我这里使用的是vue-cookies插件1.安装 vue-cookiesnpm install vue-cookies --save2.引入 vue-cookies（找到main.js,输入下面的代码，我们就可以开始使用啦。）import Vue

2022-04-25 11:15:10 670

原创 Vue 实现商品详情多播图(点击图片列表轮播图)

Vue 实现商品详情多播图(点击轮播图)之前弄商城项目有要到这种效果的商品展示图(商品图片轮播)，找了很久没找到，就自己写了一个。实现效果：点击左右按钮图片左右移动点击小图片图片展示到大图图片移动到最后直接回滚到第一张直接上图：HTML代码：<template> <div> <div style="width:800px;height:800px;margin:20px 0 0 700px;"> &lt

2022-04-22 11:50:44 7985 11

原创 vue实现侧边图片上下点击轮播

vue实现侧边图片上下点击轮播开门见山，直接上图HTML代码：<template> <div> <div style="width:400px;height:400px;margin:100px 0 0 700px;"> <ul class="sideImg_ul"> <li v-for="(item,index) in SideImgUrlList" .

2022-04-21 11:27:33 1187

LONGYog的博客