页面渲染数据

绝地灬酷狼 2022-09-11 13:14 281阅读 0赞

需求：

已知购物车数据，渲染页面，根据每一个商品中的选中状态决定全选状态、总数量和总价格

<style>
            * {
                padding: 0;
                margin: 0;
                list-style: none;
            }
    
            .wrap {
                width: 300px;
                margin: 10px auto;
            }
    
            .uls {
                border: 1px dashed red;
                margin: 10px;
                padding: 10px;
            }
    
            p {
                margin-left: 20px;
            }
        </style>

<div class="wrap">
            <input type="checkbox" name="" id="">全选
            <div class="box"></div>
            <p>总数量: <span>0</span></p>
            <p>总价格: <span>0.00</span></p>
        </div>

<script>
            let products = [{
                    goods_name: '小米10-1',
                    goods_img: 'https://img12.360buyimg.com/n0/s80x80_jfs/t1/118064/27/12885/59959/5f17b7efE453f688d/5b33ac76b2aaea9b.jpg',
                    goods_price: '500',
                    goods_attr: '砂石黑4GB+64GB',
                    goods_num: 10,
                    goods_is_checked: true
                },
                {
                    goods_name: '小米10-2',
                    goods_img: 'https://img12.360buyimg.com/n0/s80x80_jfs/t1/118064/27/12885/59959/5f17b7efE453f688d/5b33ac76b2aaea9b.jpg',
                    goods_price: '510',
                    goods_attr: '砂石黑4GB+64GB',
                    goods_num: 50,
                    goods_is_checked: false
                }
                // ,
                // {
                //     goods_name: '小米10-2',
                //     goods_img: 'https://img12.360buyimg.com/n0/s80x80_jfs/t1/118064/27/12885/59959/5f17b7efE453f688d/5b33ac76b2aaea9b.jpg',
                //     goods_price: '510',
                //     goods_attr: '砂石黑4GB+64GB',
                //     goods_num: 50,
                //     goods_is_checked: true
                // }
            ];
            let allinp = document.querySelector('.wrap>input');
            console.log(allinp);
            for (let i = 0; i < products.length; i++) {
                let uls = document.createElement('ul');
                // 添加类名
                uls.className = 'uls';
                // 赋值
                uls.innerHTML = `
                <input type="checkbox" name="" id="">
                <ul>
                    <li>商品名称:${products[i].goods_name}</li>
                    <li><img src="${products[i].goods_img}" alt=""></li>
                    <li>商品价格:${products[i].goods_price}</li>
                    <li>购买数量:${products[i].goods_num}</li>
                    <li>商品规格:${products[i].goods_attr}</li>
                    <li>是否选中:${products[i].goods_is_checked?'选中吧':'不选中啊'}</li>
                </ul>
                `;
                // 追加内容
                document.querySelector('.box').appendChild(uls);
                // 获取元素
                let inps = document.querySelectorAll('.box input');
                let spans = document.querySelectorAll('p span');
                // 判断products[i].goods_is_checked 是否是true 如果是则复选框选中否则不选中
                if (products[i].goods_is_checked) {
                    inps[i].checked = true;
                    spans[0].innerHTML = products[i].goods_num;
                    spans[1].innerHTML = products[i].goods_num * products[i].goods_price;
                } else {
                    inps[i].checked = false;
                }
                // 判断全选是否选中 如果是则所有复选框选中
                allinp.onchange = function () {
                    if (allinp.checked) {
                        let a = [];
                        let b = [];
                        for (let i = 0; i < inps.length; i++) {
                            inps[i].checked = true;
                            a.push(products[i].goods_num);
                            b.push(products[i].goods_price*products[i].goods_num);
                        }
                        let sum = 0;
                        let prices =0;
                        a.forEach(function (item) {
                            sum += Number(item);
                        })
                        b.forEach(function (item) {
                            prices += Number(item);
                        })
                        spans[0].innerHTML = sum;
                        spans[1].innerHTML = prices;
                    }
                    // if (allinp.checked) {
                    //     inps[i].checked = true;
                    //     spans[0].innerHTML = products[i-1].goods_num+products[i].goods_num;
                    //     spans[1].innerHTML = (products[i-1].goods_num * products[i-1].goods_price)+(products[i].goods_num * products[i].goods_price);
                    // }
                };
            }
        </script>

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/2fff977ed7274fcba29757a4d685e218.png

发表评论取消回复

表情：

评论列表（有 0 条评论，281人围观）

还没有评论，来说两句吧...

相关阅读

相关前端页面渲染标签数据

背景：使用 vue-quill-editor 富文本插件编辑文本，进行预览时无法按着编辑的文本样式显示解决： 1、CSS代码：（主要是对

骑猪看日落/ 2023年06月15日 11:04/ 0 赞/ 11 阅读

相关 vue修改数据页面不重新渲染

vue修改数据页面不重新渲染使用vue，遇到几次修改了对象的属性后，页面并不重新渲染，模拟案例如下： <template> <div>

柔情只为你懂/ 2022年12月24日 04:57/ 0 赞/ 263 阅读

相关数据更新后，页面不重新渲染

在vue中更改数组和对对象但是页面不重新渲染在这个确实已经更改数据成功了但是vue没有重新渲染页面，好像没监听到数据改变一样这时候最粗鲁的做法是在更改数据之

Love The Way You Lie/ 2022年11月29日 03:02/ 0 赞/ 234 阅读

相关页面渲染数据

需求：已知购物车数据，渲染页面，根据每一个商品中的选中状态决定全选状态、总数量和总价格 <style> {

绝地灬酷狼/ 2022年09月11日 13:14/ 0 赞/ 282 阅读

相关 Vue在页面数据渲染完成之后调用

在使用Vue框架的时候，有时候需要在Vue在页面数据渲染完成之后调用方法，不然获取不到准确的数据，特别是在获取列表的高度的时候，由于数据没有加载完，获取不到准确的高度。之前在使

﹏ヽ暗。殇╰゛Y/ 2022年05月30日 21:03/ 0 赞/ 566 阅读

相关 vue项目城市选择页面页面的动态数据渲染

创建city-ajax页面 git pull git checkout city-ajax npm run start 把代码提交到线上 git add .

Love The Way You Lie/ 2022年05月24日 05:48/ 0 赞/ 326 阅读

相关页面渲染机制

简单渲染过程 url解析： 1. 用户输入URL地址 2. 浏览器解析URL解析出主机名 3. 浏览器将主机名转换成服务器ip地址（浏览器先查找本地DNS缓存列表

Bertha 。/ 2022年05月22日 12:50/ 0 赞/ 349 阅读

相关 djjango页面渲染

循环涉及多对多 ![1262189-20190629210553318-1060217456.png][] 转载于:https://www.cnblogs.co

亦凉/ 2021年09月29日 20:54/ 0 赞/ 445 阅读

相关 Vue的修改数据页面不重新渲染

需求：通过一个数组渲染出商品列表，现在我通过价格对数组内的商品进行排序，希望改变数组后重新渲染商品列表。问题：数组改变之后并没有重新渲染。测试流程：

╰半橙微兮°/ 2021年09月18日 02:22/ 0 赞/ 499 阅读

相关 vue修改数据页面不重新渲染

使用vue，遇到几次修改了对象的属性后，页面并不重新渲染，模拟案例如下： <template> <div> <div v-for="(it

迈不过友情╰/ 2021年07月26日 14:29/ 0 赞/ 906 阅读