vue中刷新input复选框保持之前的状态

最新推荐文章于 2023-06-23 19:53:57 发布
最新推荐文章于 2023-06-23 19:53:57 发布
阅读量954 收藏 1
点赞数 1
文章标签： vue中刷新input复选框保持之前的状态
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_41601299/article/details/97401773
版权

vue源码Demo

<template>
    <div>
        <div class="boxTwo">
            <div class="boxList" v-for="(item,index) in diviceList" :key="index" @click="modeBoxs(e)">
                <div class="boxTop">
                    <span>{{item.deviceName}}</span>
                    <span>{{item.sn}}</span>
                </div>
                <div class="boxBottom">
                        <span :class="item.status=='Y'?'frog_time1':'frog_time2'" v-if="item.status=='Y'">{{item.createTime}}</span>
                        <span :class="item.status=='N'?'frog_time2':'frog_time1'" v-if="item.status=='N'">{{item.createTime}}</span>
                        <span :class="item.status=='Y'?'frog_text1':'frog_text2'" v-if="item.status=='Y'">已激活</span>
                        <span :class="item.status=='N'?'frog_text2':'frog_text1'" v-if="item.status=='N'">未激活</span>
                </div>
                <div class="inputRight">
                    <input type="checkbox" class="checkBox" name="fkcheck" :id="item.deviceId"/>
                </div>
            </div>
        </div>
        <Bottom/>
        <el-button
            v-loading.fullscreen.lock="fullscreenLoading">
        </el-button>
    </div>
</template>

关注我的微信公众号【前端基础教程从0开始】，加我微信，可以免费为您解答问题。回复“1”，拉你进程序员技术讨论群。回复“小程序”，领取300个优秀的小程序开源代码+一套入门教程。回复“领取资源”，领取300G前端，Java，微信小程序，Python等资源，让我们一起学前端。

<script>
import Bottom from "../../components/Bottom"
import $ from 'jquery'
export default {
    name:'AddDevice',
    components:{
        Bottom
    },
    data(){
        return{
            imgUrl1:require("../../assets/ic_serch@2x.png"),
            imgUrl2:require("../../assets/scanG_icon@2x.png"),
            diviceList:{},
            fullscreenLoading: false,
        }
    },
    updated() {
        //刷新保持状态
        var m = localStorage.getItem("deviceIdList");
        var cbs=document.getElementsByName("fkcheck");
        console.log(cbs)
        if (m) {//cookie中有值，初始化勾选状态
            var arr = m.split(',');
            for(var j=0;j<arr.length;j++)
                for(var i=0;i<cbs.length;i++)
                if (cbs[i].id == arr[j]) { cbs[i].checked = true; break;}
        }
    }, 
    mounted: function() {
        this.deviceList() 
    },
    methods: {
        //input复选框
        modeBoxs(e){
            e = e || window.event;
            if($(e.target).is(':checked')){
                //点击的哪个现金券已经被选中了
                var productList=document.getElementsByName("fkcheck");
                console.log(productList)
                var arrId=[];
                for(var i=0;i<productList.length;i++){
                    //计算勾选的产品
                    if(productList[i].checked==true){ 
                        arrId.push(productList[i].id); 
                    }
                }
                localStorage.setItem("deviceIdList",arrId)
            }else{
                var productList=document.getElementsByName("fkcheck");
                var arrId=[];
                for(var i=0;i<productList.length;i++){
                    //计算勾选的产品
                    if(productList[i].checked==true){ 
                        arrId.push(productList[i].id); 
                    }
                }
                localStorage.setItem("deviceIdList",arrId)
            }
        },
        //设备列表查询
        deviceList(){
            this.fullscreenLoading = true;
            let sha256 = require("js-sha256").sha256
            var myDate = new Date();
            var nn=myDate.getFullYear(); //获取完整的年份(4位,1970-????)
            var yy=myDate.getMonth()+1; //获取当前月份(0-11,0代表1月)
            if(yy<10){
            yy='0'+yy
            }
            var rr=myDate.getDate(); //获取当前日(1-31)
            if(rr<10){
            rr='0'+rr
            }
            var ss=myDate.getHours(); //获取当前小时数(0-23)
            if(ss<10){
            ss='0'+ss
            }
            var ff=myDate.getMinutes(); //获取当前分钟数(0-59)
            if(ff<10){
            ff='0'+ff
            }
            var mm=myDate.getSeconds(); //获取当前秒数(0-59)
            if(mm<10){
            mm='0'+mm
            }
            this.reqTime=nn+yy+rr+ss+ff+mm
            this.reqDate=nn+yy+rr
            this.username=localStorage.getItem('username')
            console.log(this.username)
            //json数据排序
            var obj={
            "reqTime":this.reqTime,
            "reqDate":this.reqDate,
            "tenantId":"0",//租户id
            "merchantNo": this.username,
            }
            function objKeySort(obj) {//排序的函数
            var newkey = Object.keys(obj).sort();
        　　//先用Object内置类的keys方法获取要排序对象的属性名，再利用Array原型上的sort方法对获取的属性名进行排序，newkey是一个数组
            var newObj = {};//创建一个新的对象，用于存放排好序的键值对
            for (var i = 0; i < newkey.length; i++) {//遍历newkey数组
                newObj[newkey[i]] = obj[newkey[i]];//向新创建的对象中按照排好的顺序依次增加键值对
            }
            return newObj;//返回排好序的新对象
            }
            var jStr = "";
            for(var item in objKeySort(obj)){
                jStr += item+"="+objKeySort(obj)[item]+"&";
            }
            jStr=jStr+'key=shrewshrewshrews'
            this.pw = sha256(jStr)
            console.log(this.pw,this.reqTime,this.reqDate,this.username)
            var datas = {//如果后台接收的数据为formData形式,要用qs.stringify
                "reqTime":this.reqTime,
                "reqDate":this.reqDate,
                "signature":this.pw,
                "tenantId":"0",//租户id,还需要方法哦header
                "merchantNo": this.username,//商户号
            };
            this.datas=datas
            this.access_token=localStorage.getItem('access_token')
            this.$axios({
                url:this.Equipment_Host,
                method: 'post',
                data: this.datas,
                headers:{
                    'TENANT_ID':'0',
                    'Authorization':'bearer '+this.access_token
                },
            })
            .then(res=>{
                console.log(res.data)
                this.diviceList=res.data.data
                let that=this
                that.fullscreenLoading = false;
            })
            .catch(error=>{
                let that=this
                that.fullscreenLoading = false;
                alert('操作错误，请退出重试！')
                console.log(error)
            })
        },
    },
}
</script>
<style lang="less" scoped>
.boxOne{
    width: 100%;
    height: 64px;
    // background-color: red;
    position: relative;
    .device{
        width: 152px;
        height: 36px;
        // background-color: green;
        margin-top: 14px;
        margin-left: 20px;
        float: left;
        position: relative;
        .device_input{
            display: inline-block;
            width: 100%;
            height: 100%;
            outline: none;
            border: none;
            float: left;
            padding-left: 20px;
            box-sizing: border-box;
            border-radius: 18px;
            background-color: #F9F9F9;   
        }
        .search_img{
            display: inline-block;
            width: 20px;
            height: 20px;
            position: absolute;
            right:22px;
            top:8px;
        }
    }
    .sweep{
        width: 72px;
        height: 20px;
        // background-color: green;
        float: left;
        margin-top: 22px;
        margin-left: 21px;
    }
    .sweep>img{
        display: inline-block;
        width: 20px;
        height: 20px;
        float: left;
        margin-right: 6px;
    }
    .sweep>span{
        display: inline-block;
        height: 20px;
        line-height: 20px;
        float: left;
        font-size: 14px;
        color:#23AE88;
        font-family: PingFangSC-Regular;
    }
    .confim{
        width: 60px;
        height: 36px;
        float:right;
        background-color: #23AE88;
        line-height: 36px;
        text-align: center;
        font-size: 16px;
        font-family: PingFangSC-Regular;
        color:#fff;
        border-radius: 18px;
        margin-top: 14px;
        margin-right: 20px;
    }
}
.boxTwo{
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    .boxList{
        width: 100%;
        height:80px;
        // background-color: red;
        overflow: hidden;
        position: relative;
        .boxTop,.boxBottom{
            width: 88.2%;
            height: 22px;
            // background-color: green;
            margin-top: 18px;
            float: left;
        }
        .boxBottom{
            height: 17px;
            margin-top: 5px;
            .frog_time1{
                display: inline-block;
                float: left;
                height: 100%;
                line-height: 17px;
                font-size:12px;
                color: #029BDD;
                font-family: PingFangSC-Regular;
            }
            .frog_time2{
                display: inline-block;
                float: left;
                height: 100%;
                line-height: 17px;
                font-size:12px;
                color: #CDCDCD;
                font-family: PingFangSC-Regular;
            }
            .frog_text1{
                display: inline-block;
                float: left;
                height: 100%;
                line-height: 17px;
                font-size:12px;
                color: #029BDD;
                font-family: PingFangSC-Regular;
                margin-left: 12px;
            }
            .frog_text2{
                display: inline-block;
                float: left;
                height: 100%;
                line-height: 17px;
                font-size:12px;
                color: #CDCDCD;
                font-family: PingFangSC-Regular;
                margin-left: 12px;
            }
        }
        .boxTop>span:first-child,.boxTop>span:last-child{
            display: inline-block;
            float: left;
            height: 22px;
            line-height: 22px;
            font-size: 16px;
            color: #333;
            font-family: PingFangSC-Regular;
        }
        .boxTop>span:last-child{
            max-width: 210px;
            overflow: hidden;
            margin-left: 4px;
        }
        .inputRight{
            width: 24px;
            height: 24px;
            // background-color: red;
            float: right;
            .checkBox{
                display: inline-block;
                float: left;
                width: 24px;
                height:24px;
            }
            .checkBox[type="checkbox"] {
                -webkit-appearance: none;  /*清除复选框默认样式*/
                background-image: url(../../assets/equListCheck_icon@2x.png);
                background-repeat: no-repeat;
                background-size: 24px 24px;
                outline: none;
            }
            .checkBox[type="checkbox"]:checked {
                background-image: url(../../assets/equListChecked_icon@2x.png);
                background-size: 24px 24px;
                -webkit-appearance: none;  /*清除复选框默认样式*/
                outline: none;
                background-repeat: no-repeat;
            }
        }
    }
    .boxList::after{
            content:"";
            position: absolute;
            bottom:0;
            left: 0;
            width: 100%;
            height: 1px;
            background-color: #D2D2D2;
        } 
}
input::-webkit-input-placeholder{ 
  color: #CDCDCD; 
  font-family: PingFangSC-Regular;
  font-size: 14px;
  line-height: 36px;
}
.boxOne::after{
  content:"";
  position: absolute;
  bottom:0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #DEDEDE ;
} 
</style>
csdn-Allen
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
刷新页面保留input所填的值_css实现刷新页面的同时保存页面控件的输入值
weixin_39612877的博客
02-05 1325
css实现刷新页面的同时保存页面控件的输入值这个对于我们来讲是非常好用了，像有些页面不小心刷新了页面表单值就丢失了需要重新输入非常的麻烦，那么我们可以使用css来定义页面刷新值保存起来，具体设置如下。在Head中加入添加css: input{behavior:url(#default#savehistory)};e.g. 页面上存在给 input输入值后刷新页面看看，输入的值还在例子 ...
vue中输出的值传到input输入框中
qq_52959651的博客
12-05 7818
vue中输出的值传到input输入框中 今天在做项目中，遇到一个问题，就是获取到的input值如何传到另一个input输入框中，在网上查了查，发现很简单，只是自己粗心大意，所以忽略了。下面我将自己的问题与解决办法写出来。 写一个简单的加法计算器 效果图： <div id="app"> <p>加法</p> <input type="text" value="" v-model="s1"> <input ty
VUE中关于复选、单选和选择框（单选-多选-动态绑定）
weixin_42943920的博客
12-03 757
##一、 关于复选框 二、关于单选框 vue中可根据v-model进行分组 HTML中根据name分组 三、关于下拉选择框 1-单选 2-多选 v-for动态绑定选项
Vue中切换了类型，发现input依然是显示之前输入的内容
小怪獸丶的糖的专栏
04-17 1506
vue示例，点击切换登录类型后界面显示不同的模块 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <span v-if="isUser"> <label for="userNmae">用户账号&lt
vue element form rules表单规则验证，输入框有值，但验证始终不消失问题的个人解决办法
最新发布
qq_38876396的博客
06-23 4493
本文章对element的表单规则验证中输入框有值，但验证始终不消失的问题，在个人项目的特殊情况下提出解决办法
vue+element 当el-table中使用el-checkbox全选视图不更新解决方法
周家大小姐
08-18 2589
加一个key就好了; 代码: <template> <div> <el-form :model="ruleForm" :rules="rules" key="ruleForm" ref="ruleForm" label-width="130px"> <el-row> <el-col :span="8"> <el-form-.
Vue基础学习
qq_41071421的博客
09-14 327
Vue基础学习 一、简介 简介 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，方便与第三方库或既有项目(vue-router、vue-axios)整合。 MVVM模式（双向数据绑定模式） MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。 Model：模型层，这里表示JavaScript对象； Vie
Vue-input框checkbox强制刷新问题
10-17
主要介绍了Vue-input框checkbox强制刷新问题，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
vue实现带复选框的树形菜单
10-16
主要为大家详细介绍了vue实现带复选框的树形菜单，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
基于vue v-for 循环复选框-默认勾选第一个的实现方法
12-29
应用场景：在进行多选的时候一般默认显示第一个。 实现方法：纯vue实现 例子： (one,index)><input type=checkbox :checked=index == ...以上这篇基于vue v-for 循环复选框-默认勾选第一个的实现方法就是小编分享给
vue.js实现单选框、复选框和下拉框示例
10-19
本篇文章主要介绍了vue.js实现单选框、复选框和下拉框示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
刷新页面保留input所填的值_页面刷新时保留input键入值
weixin_42367464的博客
02-05 1450
一般来说，页面刷新时不保留input键入值的需要比较多，但是也有例外，譬如咱这次就遇上需要保留input键入值。在firefox这不是问题，ie的刷新机制导致刷新页面时不会从浏览器缓存中读取，所以我们需要解决的问题也集中在ie下。Html代码input{behavior:url(#default#savehistory)};大致思路是利用行为标签(behavior)，在访问页面时默认读取缓存，这里...
vue 刷新页面保持复选框的选中状态_vue结合vuex实现购物车
weixin_39982580的博客
12-13 911
题图 FromBing By Clm上一篇文章react结合redux实现了一个购物车功能，本篇给大家演示用vue结合vuex实现相同的购物车功能。首先看下要实现的页面功能：观察页面，灰色标签标识了页面的功能，具体功能分析如下：1、可以实现全选/反选功能，全选/反选功能和每件商品的选中功能联动。2、商品数量增减功能，商品数量的修改会同步到服务端。3、商品件数和总价会根据商品选中数量实时...
vue数据同步输入框处理显示
qq_51389137的博客
12-29 1174
修改数据，如何将原数据带到输入框
小宝儿的学习之路
07-15 890
需求： 对数据进行修改时，将原本的数据显示到输入框中 代码展示 <template> <div> <el-table :data="tableData" border stripe height="250" style="width:100%"> <el-table-column type="selection" width="
vue切换路由后，保存原页面的input框输入信息
yingzhi3104的博客
02-26 4010
配合vue-router，可以配置meta中的keep-alive解决这个问题： 在vue-router的配置中，添加（keepAlive: true） { path: '/HelloWorld', name: 'HelloWorld', component: HelloWorld, meta: { requireAuth: true, keepAlive:...
Vue记住刷新前复选框的选中状态
Mr_zrh的博客
05-12 886
在需要记住的checkbox 的vue文件中 <template> <div> <input type="checkbox" :checked="a" @click="change"> </div> </template> <script> export default { data() { return { a:"" }; }, created () { t
Vue-ElementUI实现前端多选框切换分页选择保留之前选的数据，分页选择、回显功能
ChuaWi98的博客
12-09 4218
Vue-ElementUI实现前端页面开发遇到切换分页时，之前页面选的数据不会保存以及选择的数据如何回显的问题。
input输入框中的内容怎么在刷新之后保存上一次的值(亲测有效)
if_i_were_a的博客
05-02 7531
input刷新之后，之前的内容就清除了，有时候在一些场景中，需要保留值 思路如下：在数据量少的情况下，将值存到cookie中，然后通过cookie取出来，复制到input的val中 代码如下: $.cookie("input_value", $('#searchText_ddq').val()); $.cookie("ddq_startTime", $('#dd...
vue实现商品复选框保持选中状态
06-08
在 Vue 中实现商品复选框的保持选中状态，可以通过以下步骤来实现： 1. 在商品列表中添加一个 `checked` 属性来记录商品的选中状态，初始值为 `false`。 2. 在每个商品的复选框上绑定 `v-model` 指令，将复选框的选中状态与商品对象的 `checked` 属性进行双向绑定。 3. 在页面加载时，从本地存储中读取商品列表的选中状态，并将其设置到对应的商品对象的 `checked` 属性中。 4. 在商品列表中添加一个全选的复选框，绑定一个 `v-model` 指令，将全选的选中状态与商品列表中所有商品的选中状态进行绑定。 5. 监听商品列表中任意一个商品的 `checked` 属性变化，当有商品的选中状态发生变化时，将商品列表的选中状态保存到本地存储中。 以下是一个示例代码： ``` <template> <div> <!-- 商品列表 --> <div v-for="(item, index) in items" :key="index"> <input type="checkbox" v-model="item.checked">{{ item.name }} - {{ item.price }} </div> <!-- 全选复选框 --> <div> <input type="checkbox" v-model="allChecked">全选 </div> </div> </template> <script> export default { data() { return { items: [ { name: '商品1', price: 100, checked: false }, { name: '商品2', price: 200, checked: false }, { name: '商品3', price: 300, checked: false }, ], allChecked: false, // 全选的选中状态 }; }, mounted() { // 从本地存储中读取选中状态 const checkedItems = JSON.parse(localStorage.getItem('checkedItems')) || {}; // 将选中状态设置到商品列表中 this.items.forEach((item, index) => { if (checkedItems[index]) { item.checked = true; } }); // 监听商品列表中任意一个商品的选中状态变化 this.$watch('items', () => { const checkedItems = {}; // 保存商品列表的选中状态到本地存储中 this.items.forEach((item, index) => { checkedItems[index] = item.checked; }); localStorage.setItem('checkedItems', JSON.stringify(checkedItems)); }, { deep: true }); }, }; </script> ``` 在上述代码中，我们使用了 `localStorage` 来保存商品列表的选中状态，通过监听 `items` 属性的变化，将商品列表的选中状态保存到本地存储中。当页面重新加载时，从本地存储中读取选中状态，并将其设置到对应的商品对象的 `checked` 属性中，从而实现商品复选框的保持选中状态。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值