vuejs的一些疑问

最新推荐文章于 2022-09-27 11:17:00 发布

小河vlog

最新推荐文章于 2022-09-27 11:17:00 发布

阅读量185

点赞数

分类专栏： JavaScript html5

本文链接：https://blog.csdn.net/qq_37499645/article/details/100729904

版权

JavaScript 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

html5

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>

<html>
<head>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <script src="~/js/adaptive-version2.js"></script>
    <link href="~/css/main.css" rel="stylesheet" />
    <link href="~/layui/layer_mobile/need/layer.css" rel="stylesheet" />
    <script>

        window['adaptive'].desinWidth = 750;
        window['adaptive'].baseFont = 10;
        window['adaptive'].init();

    </script>
    <title></title>
    <style type="text/css">
        .click_view {
            cursor: pointer;
        }

        .slide_img {
            left: -8rem;
        }

        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body class="g_bg">
    <!--搜索栏-->
    <div class="search_1">
        <img src="/images/huajieyiyao/s02.png" alt="">
    </div>
    <div class="hide_c">
        <div class="animate_c">
            <input class="ipt_se_1" type="text" placeholder="请输入搜索项" id="name">
            <div class="timer_1">
                <input type="text" placeholder="开始日期" id="start" readonly="readonly">
                <div class="line_1"></div>
                <input type="text" placeholder="结束日期" id="end" readonly="readonly">
            </div>
            <input class="btn_s" type="button" value="搜 索" id="sousuo">

            <div class="line_2"></div>
        </div>
        <div class="black_bg"></div>
    </div>
    <!--搜索栏结束-->    

    <div class="color_box2">
        <div class="page_title">
            <img src="/images/z08.png" alt="">
            <p>公共池</p>
        </div>
        <img class="bg_023" src="/images/bg_w.png" alt="">
    </div>

    <div class="list_box2">
        <div class="scroll_box2" id="itemlist">
            <div class="list_clm2" v-for="parentitem in list">
                <div class="txt_p_box">
                    <p>来账公司：{{parentitem.cnterAcctName1}}</p>
                    <p>来账账号：{{parentitem.counterAcctNo1}}</p>
                    <p>来账时间：{{parentitem.ordrDtTm}}  {{parentitem.tranTime2}}</p>
                    <p>来账金额：{{parentitem.tranAmt}}元</p>
                    <p>开户行：{{parentitem.cnterBankName}}</p>
                    <p>交易流水号：{{parentitem.tranSeqNo3}}</p>
                    <p>备注：{{parentitem.remark}}</p>
                </div>
                <div class="click_view" :data-id='parentitem.id'>
                    <img class="vimg" src="/images/z10.png" alt="" data-first="0">
                    <p class="txt_1">点击添加关注</p>
                    <img class="slide_img" src="/images/line_1.png" alt="">
                </div>
            </div>

        </div>

    </div>
    <div class="bottom_fix">
        <img class="logo" src="/images/logo.png" alt="">
        <img class="bt_line" src="/images/line_1.png" alt="">
    </div>
    <script src="~/js/jquery-1.7.2.min.js"></script>
    <script src="~/js/jquery.cookie.js"></script>
    <script src="~/js/vue.min.js"></script>
    <script src="~/layui/layer_mobile/layer.js"></script>
    <script src="~/layui/laydate/laydate.js"></script>
    <script>
        var PageNumber = 1;


        //执行一个laydate实例
        laydate.render({
            elem: '#start' //指定元素
        });


        //执行一个laydate实例
        laydate.render({
            elem: '#end' //指定元素
        });

        //数据转换
        function GetObj(obj, fn) {
            if (obj.success) {
                var data = JSON.parse(obj.data);
                console.log(data);
                if (data.statusCode == "0000") {
                    var retMsg = data.retMsg;
                    console.log(retMsg);
                    fn(retMsg);
                }
            }
        }
        //数据转换

        var LoadGuiShuList = [];///归属信息列表
        ///初始化  vue
        
        var vm=new Vue({
                el: '#itemlist',
                data: {
                    list: LoadGuiShuList
                }
            });
        
        
        ///初始化  vue


        $(function () {
            /**屏幕高度**/
            function autoHeight() {
                var h = $(window).height();
                $(".scroll_box2").css('height', h - 180);
            }

            autoHeight();
            $(window).resize(autoHeight);

            $(".slide_img").css("left", "-8rem");

            $("#itemlist").on("click", ".click_view", function () {
                var id = $(this).attr("data-id");
                if ($(this).children(".vimg").attr("data-first") == "0") {
                    $(this).children(".vimg").attr("src", "/images/huajieyiyao/z09.png")
                    $(this).children(".txt_1").html("点击取消关注")
                    $(this).children(".slide_img").stop(false.true).animate({ left: "0rem" }, 500)
                    $(this).children(".vimg").attr("data-first", "1");
                    //添加关注操作
                    AddCanelGuanZhu(id, "mark")
                } else {
                    $(this).children(".vimg").attr("src", "/images/huajieyiyao/z10.png")
                    $(this).children(".txt_1").html("点击添加关注")
                    $(this).children(".slide_img").stop(false.true).animate({ left: "-8rem" }, 500)
                    $(this).children(".vimg").attr("data-first", "0");
                    //取消关注操作
                    AddCanelGuanZhu(id, "over");
                }
            });

            ///获取公共池信息
            function GetPubPool() {
                $.post("/data/PubPool", {
                    cnterAcctName1: $("#name").val(),
                    startDate: $("#start").val().replace(/[-]/g, ""),
                    endDate: $("#end").val().replace(/[-]/g, ""),
                    token: $.cookie("huajie"),
                    pageNum: PageNumber,
                    pageSize: 10
                }, function (res) {
                    GetObj(res, function (obj) {
                        obj = obj.replace(/\"id\":(\d+)/, '"id": "$1"');//给id转换为字符串类型
                        console.log('转换前', obj);
                        obj = JSON.parse(obj);
                        if (obj.msg == "密钥解析失败，请重新登录") {
                            console.log("登录信息失效");
                            //询问框
                            layer.open({
                                content: '登录信息失效，是否重新登录？'
                                , btn: ['确定', '取消']
                                , yes: function (index) {
                                    layer.close(index);
                                    window.location.href = '/HuaJieYiYao/Index';
                                }
                            });
                            return false;
                        }

                        if (obj.msg =="未查询到相关数据") {
                            //信息框
                            layer.open({
                                content: obj.msg
                                , btn: '我知道了'
                            });
                            return false;
                        }


                        console.log('转换后', obj);
                        for (var i = 0; i < obj.result.length; i++) {
                            //LoadGuiShuList.push(obj.result[i]);//追加一个元素
                            GetDetail(obj.result[i].id);
                            console.log(vm);
                            vm.list.push(obj.result[i]);
                        }
                    });
                })
            }
            ///获取公共池信息
            GetPubPool();
            ///获取公共池信息

            //获取详细信息
            function GetDetail(str) {
                $.post("/HuaJieYiYao/DataDetails", {
                    token: $.cookie("huajie"),
                    id: str
                }, function (res) {
                    GetObj(res, function (obj) {
                        console.log(obj);

                    });

                });
            }
            //获取详细信息


            ///添加或者取消关注
            function AddCanelGuanZhu(strid, types) {
                $.post("/data/FocusData", {
                    ids: strid,
                    type: types,
                    token: $.cookie("huajie")
                }, function (res) {
                    GetObj(res, function (obj) {
                        obj = JSON.parse(obj);
                        console.log(obj);
                        if (obj.code == 200) {
                            console.log("成功");
                        }
                        if (obj.msg == "密钥解析失败，请重新登录") {
                            console.log("token失效");
                        }
                    });
                })
            }
            ///添加或者取消关注

            //监听上下滑动
            $(window).scroll(function () {
                var scrollTop = $(this).scrollTop();
                var scrollHeight = $(document).height();
                var windowHeight = $(this).height();
                if (scrollTop + windowHeight == scrollHeight) {
                    GetPubPool();
                }
            });
            //监听上下滑动
            /**侧边栏**/
            $(".black_bg").hide()

            $(".search_1").click(function () {
                $(".black_bg").fadeIn();
                $(".animate_c").animate({ right: "0rem" }, 500)
            })
            $(".black_bg").click(function () {
                $(".animate_c").animate({ right: "-5rem" }, 500)
                $(".black_bg").fadeOut("slowly");
            })

            /*点击搜索按钮*/
            $("#sousuo").click(function () {
                $(".black_bg").click();
                PageNumber = 1;
                Vue.set(vm, "list", []);
                LoadGuiShuList = [];               
                GetPubPool();
                console.log(vm);
            });
            /*点击搜索按钮*/


        });
    </script>
</body>
</html>

上面是一段代码当页面初次加载时去服务端请求json数据随着数据加载对变量 LoadGuiShuList 追加数据页面也随之渲染

这里出现的一问题是当我需要重新加载数据时需要对 vue data 的list 清空在网上找了很多最终使用到了 Vue.set(a,b,c) 这个函数可以对 vue data 里的值进行修改。

很疑问的一句代码

for (var i = 0; i < obj.result.length; i++) {
//LoadGuiShuList.push(obj.result[i]);//追加一个元素

console.log(vm);
vm.list.push(obj.result[i]);//重点重点重点重点重点重点
}

在重点标记处对此追加数据也可以使页面渲染本人不是职业前端很想知道一下上面这几行代码的渲染方式对吗，我这里页面确实是渲染出来了，请各位大神指点一下