ES6高级-查询商品案例

最新推荐文章于 2024-05-20 15:44:06 发布

申申あ

最新推荐文章于 2024-05-20 15:44:06 发布

阅读量393

点赞数

分类专栏： ES6 文章标签： es6 前端 ecmascript

本文链接：https://blog.csdn.net/qq_43781887/article/details/125992224

版权

本文通过一个查询商品的案例，深入探讨ES6在前端开发中的高级应用，包括动态渲染数据到页面、根据价格及商品名称进行查询等功能。示例代码展示了如何高效实现这些功能。

摘要由CSDN通过智能技术生成

首先来看布局：

查询商品案例需要实现的功能：
1.把数据渲染到页面中

2.根据价格显示数据

3.根据商品名称显示数据

功能一：动态渲染数据到页面

  // 获取tbody
        var tb = document.querySelector('tbody');
        // 把数据渲染到页面中
        datas(data)

        function datas(data) {
            // 清空tbody里面的内容
            tb.innerHTML = '';
            data.forEach(function(value) {
                // 创建一个行
                var tr = document.createElement('tr');
                // 创建三个列
                tr.innerHTML = '<td>' + value.id + '</td><td>' + value.pname + '</td><td>' + value.price + '</td>';
                // 把这个行追加到tbody里面
                tb.appendChild(tr);
            })
        }

功能二：根据价格查询商品

 // 根据价格查询商品
        // 当我们点击了按钮，就可以根据我们的商品价格去筛选里面的对象
        // 获取元素
        var star = document.querySelector('.start');
        var end = document.querySelector('.end');
        var searchbtn = document.querySelector('.search-price');
        searchbtn.addEventListener('