<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[LONGYog的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/LONGYog</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; LONGYog]]></copyright><item><title><![CDATA[Vue + elementui实现分页查询(选中后跳转回来仍然是保持选中状态回显)]]></title><link>https://blog.youkuaiyun.com/LONGYog/article/details/124769970</link><guid>https://blog.youkuaiyun.com/LONGYog/article/details/124769970</guid><author>LONGYog</author><pubDate>Mon, 30 May 2022 17:52:07 +0800</pubDate><description><![CDATA[Vue + elementui实现分页查询(选中后跳转回来仍然是保持选中状态回显)
1.前言
最近要实现列表分页查询效果，分页跳转是实现了，可是分页跳转回来后，之前选中的状态就没了，于是上网查了一下，发现可以通过数组来存储id来实现保持选中状态回显，从而实现分页跳转后，跳转回来复选框还是勾选上的
2.实现效果
如图：

3.代码
HTML：
&lt;template&gt;
    &lt;div&gt;
        &lt;div style="background-color: #f4f4f4;ma]]></description><category></category></item><item><title><![CDATA[Vue 实现复选框全选，反选，单选，多选(简易版)]]></title><link>https://blog.youkuaiyun.com/LONGYog/article/details/124727326</link><guid>https://blog.youkuaiyun.com/LONGYog/article/details/124727326</guid><author>LONGYog</author><pubDate>Mon, 23 May 2022 15:51:37 +0800</pubDate><description><![CDATA[Vue 实现复选框全选，反选，单选，多选(简易版)
实现效果，如图：

HTML代码：
&lt;template&gt;
    &lt;div&gt;
        &lt;div style="background-color: #f4f4f4;margin:50px 0 0 260px;width:900px;height:500px;padding:50px"&gt;
            &lt;ul style="list-style: none"&gt;
                &]]></description><category></category></item><item><title><![CDATA[Vue 实现所有商品分类抽屉式效果，下拉效果，回收效果(动效)]]></title><link>https://blog.youkuaiyun.com/LONGYog/article/details/124725139</link><guid>https://blog.youkuaiyun.com/LONGYog/article/details/124725139</guid><author>LONGYog</author><pubDate>Thu, 19 May 2022 11:14:15 +0800</pubDate><description><![CDATA[Vue 实现所有商品分类抽屉式效果(动效)
实现效果：点击分类名，下拉显示子分类，再点击则回收。
如图：
HTML代码：
&lt;template&gt;
    &lt;div&gt;
        &lt;div style="background-color: #fff;margin:50px 0 0 260px;width:900px;height:900px;padding:50px"&gt;
            &lt;div&gt;
                &lt;ul clas]]></description><category></category></item><item><title><![CDATA[vue elementui el-tabs 底部的下划线和切换时的下划线移动到上方]]></title><link>https://blog.youkuaiyun.com/LONGYog/article/details/124606876</link><guid>https://blog.youkuaiyun.com/LONGYog/article/details/124606876</guid><author>LONGYog</author><pubDate>Mon, 16 May 2022 08:57:28 +0800</pubDate><description><![CDATA[Vue Elementui el-tabs 底部的下划线和切换时的下划线移动到上方
实现效果如图：

代码：
&lt;template&gt;
    &lt;div&gt;
        &lt;div style="background-color: #f4f4f4;margin:50px 0 0 260px;width:900px;height:600px;padding:50px"&gt;
            &lt;el-tabs v-model="activeName"&gt;
     ]]></description><category></category></item><item><title><![CDATA[Vue 实现前端银行卡隐藏中间的数字，及隐藏姓名后两位]]></title><link>https://blog.youkuaiyun.com/LONGYog/article/details/124607094</link><guid>https://blog.youkuaiyun.com/LONGYog/article/details/124607094</guid><author>LONGYog</author><pubDate>Mon, 09 May 2022 09:10:57 +0800</pubDate><description><![CDATA[Vue 实现前端银行卡隐藏中间的数字
主要应用了 filters过滤器 来实现效果
实现效果，如图：

HTML代码：
&lt;template&gt;
    &lt;div&gt;
        &lt;div style="background-color: #f4f4f4;margin:50px 0 0 460px;width:900px;height:300px;"&gt;
            &lt;p&gt;原来：{{ cardNo }}&lt;/p&gt;
            &l]]></description><category></category></item><item><title><![CDATA[Vue 日期格式化年月日，时分秒]]></title><link>https://blog.youkuaiyun.com/LONGYog/article/details/124609075</link><guid>https://blog.youkuaiyun.com/LONGYog/article/details/124609075</guid><author>LONGYog</author><pubDate>Sat, 07 May 2022 16:12:38 +0800</pubDate><description><![CDATA[Vue 日期格式化年月日，时分秒
实现效果，如图：

HTML代码：
&lt;template&gt;
    &lt;div&gt;
        &lt;div style="background-color: #f4f4f4;margin:50px 0 0 460px;width:500px;height:500px;"&gt;
        	&lt;p&gt;原日期：{{ time }}&lt;/p&gt;
            &lt;p&gt;改变后(xxxx年xx月xx日)：{{ Ob]]></description><category></category></item><item><title><![CDATA[Vue 实现截取网络地址字符串携带的参数]]></title><link>https://blog.youkuaiyun.com/LONGYog/article/details/124500787</link><guid>https://blog.youkuaiyun.com/LONGYog/article/details/124500787</guid><author>LONGYog</author><pubDate>Tue, 03 May 2022 22:30:00 +0800</pubDate><description><![CDATA[Vue 实现截取网络地址字符串携带的参数
实现效果，如图：

HTML代码：
&lt;template&gt;
    &lt;div&gt;
        &lt;div style="background-color: #f4f4f4;margin:50px 0 0 460px;width:900px;height:300px;"&gt;
            &lt;p&gt;截取前：{{ testurl }}&lt;/p&gt;
            &lt;p&gt;截取后(转为对象)：{{]]></description><category></category></item><item><title><![CDATA[Vue + elementui 实现文本内容复制（简易版）]]></title><link>https://blog.youkuaiyun.com/LONGYog/article/details/124452752</link><guid>https://blog.youkuaiyun.com/LONGYog/article/details/124452752</guid><author>LONGYog</author><pubDate>Tue, 03 May 2022 10:00:00 +0800</pubDate><description><![CDATA[1.需求
点击实现复制文本内容
2.实现效果

HTML代码：
&lt;template&gt;
    &lt;div&gt;
        &lt;div style="background-color: #f4f4f4;margin:50px 0 0 460px;width:500px;height:300px;"&gt;
            &lt;el-input v-model="content"&gt;&lt;/el-input&gt;
            &lt;p&gt;{{ c]]></description><category></category></item><item><title><![CDATA[Vue 将对象转换成字符串（去除对象中的花括号和双引号）]]></title><link>https://blog.youkuaiyun.com/LONGYog/article/details/124467552</link><guid>https://blog.youkuaiyun.com/LONGYog/article/details/124467552</guid><author>LONGYog</author><pubDate>Thu, 28 Apr 2022 10:52:59 +0800</pubDate><description><![CDATA[Vue 将对象转变成字符串输出
实现效果，如图：

HTML代码：
&lt;template&gt;
    &lt;div&gt;
        &lt;div style="background-color: #f4f4f4;margin:50px 0 0 460px;width:500px;height:300px;"&gt;
            &lt;p&gt;原对象：{{ testObj }}&lt;/p&gt;
            &lt;p&gt;改变后：{{ tempObj }}]]></description><category></category></item><item><title><![CDATA[Vue+elementui实现点击切换登录方式(超简单)]]></title><link>https://blog.youkuaiyun.com/LONGYog/article/details/124430811</link><guid>https://blog.youkuaiyun.com/LONGYog/article/details/124430811</guid><author>LONGYog</author><pubDate>Tue, 26 Apr 2022 16:28:40 +0800</pubDate><description><![CDATA[1.前言
使用Vue + elementui实现切换登录方式，新手党！！！
2.需求
点击按钮切换账号登录或短信登录方式
3.实现效果
如图所示：

HTML代码：
&lt;template&gt;
    &lt;div style="min-height:800px;padding: 100px 0 0 640px;background-color:#f4f4f4"&gt;
        &lt;div class="login_box"&gt;
            &lt;p class="lo]]></description><category></category></item><item><title><![CDATA[Vue 使用Cookies实现商品搜索历史记录]]></title><link>https://blog.youkuaiyun.com/LONGYog/article/details/124347892</link><guid>https://blog.youkuaiyun.com/LONGYog/article/details/124347892</guid><author>LONGYog</author><pubDate>Mon, 25 Apr 2022 11:15:10 +0800</pubDate><description><![CDATA[Vue 使用Cookies实现商品搜索历史记录
需求
用户搜索商品，我们需要把用户输入的词语存储到搜索历史并展示
tip：存储不知道存储到哪里，所以我想到了用cookies存储到客户端
1.前言
vue使用cookie，需先安装cookies插件，我这里使用的是vue-cookies插件

1.安装 vue-cookies

npm install vue-cookies --save


2.引入 vue-cookies（找到main.js,输入下面的代码，我们就可以开始使用啦。）

import Vue]]></description><category></category></item><item><title><![CDATA[Vue 实现商品详情多播图(点击图片列表轮播图)]]></title><link>https://blog.youkuaiyun.com/LONGYog/article/details/124341749</link><guid>https://blog.youkuaiyun.com/LONGYog/article/details/124341749</guid><author>LONGYog</author><pubDate>Fri, 22 Apr 2022 11:50:44 +0800</pubDate><description><![CDATA[Vue 实现商品详情多播图(点击轮播图)
之前弄商城项目有要到这种效果的商品展示图(商品图片轮播)，找了很久没找到，就自己写了一个。
实现效果：

点击左右按钮图片左右移动
点击小图片图片展示到大图
图片移动到最后直接回滚到第一张

直接上图：

HTML代码：
&lt;template&gt;
    &lt;div&gt;
        &lt;div style="width:800px;height:800px;margin:20px 0 0 700px;"&gt;
            &lt]]></description><category></category></item><item><title><![CDATA[vue实现侧边图片上下点击轮播]]></title><link>https://blog.youkuaiyun.com/LONGYog/article/details/124316900</link><guid>https://blog.youkuaiyun.com/LONGYog/article/details/124316900</guid><author>LONGYog</author><pubDate>Thu, 21 Apr 2022 11:27:33 +0800</pubDate><description><![CDATA[vue实现侧边图片上下点击轮播


开门见山，直接上图



HTML代码：


&lt;template&gt;
    &lt;div&gt;
        &lt;div style="width:400px;height:400px;margin:100px 0 0 700px;"&gt;
            &lt;ul class="sideImg_ul"&gt;
                &lt;li v-for="(item,index) in SideImgUrlList" .]]></description><category></category></item></channel></rss>