<div v-for="(data,index) in list" :key="index" class="speCific" :data-id="data.bookId"> <div class="xzWxz"> <b><img :src="/BookShopSystem_war/cart/xzwxz.png"></b> </div> <div class="xzSp"> <img :src="'/BookShopSystem_war/' + data.image1"> <div class="xzSpIn"> <h3 class="font16 c_33 font100">{{ data.bookName }}</h3> <h3 class="font16 c_33 font100">{{ data.bookAuthor }}</h3> <h3 class="font16 c_33 font100">{{ data.bookPublish }}</h3> </div> </div> <div class="xzJg"> ￥<font>{{ data.price }}</font> </div> <div class="xzSl"> <div class="xzSlIn"> <b class="Amin">减</b> <input type="text" :value="data.num" readonly class="cOnt"> <b style="border-right: none;border-left:1px solid #ddd;" class="Aadd">加</b> </div> </div> <div class="xzXj">￥{{data.total}}<font></font></div> <div class="xzSz"> <div class="xzCzIn"> <a href="javascript:void(0)" class="Dels" :data-id="data.bookId">删除</a>  </div> </div> </div>new Vue({ el: '#app', data: { userId: '', list: [] // list: [ // {userId:null,bookName:"图书1",image1:"/BookShopSystem_war/cart/xzwxz.png",price:50,num:2}, // {userId:null,bookName:"图书2",image1:"/BookShopSystem_war/cart/xzwxz.png",price:50,num:1}, // {userId:null,bookName:"图书3",image1:"/BookShopSystem_war/cart/xzwxz.png",price:50,num:2} // ] }, //选择或不选择一项 $(".xzWxz").click(function () { if ($(this).hasClass("on")) { $(this).removeClass("on"); } else { $(this).addClass("on"); } var ty = $(".xzWxz.on").length; $(".sXd1").find("font").html(ty); if (ty == es) { $(".ifAll").addClass("on"); } else { $(".ifAll").removeClass("on"); } jsZj(); }); 当我使用未被注释的list，<div class="xzWxz"> <b><img :src="/BookShopSystem_war/cart/xzwxz.png"></b> </div> 该代码点击后没有变化，而我使用注释的静态list数组，该代码点击有变化，为什么，未注释的list是能获取到数据并遍历了出来，如何解决

时间: 2023-10-11 10:13:16 浏览: 114

根据你提供的代码，点击 `<div class="xzWxz">` 标签后，应该会添加或移除 `on` 类名。但是你说未注释的 `list` 数组使用后没有变化，可能是因为你没有对 `on` 类名进行样式定义，或者在其他地方将其重置了。至于如何解决，可以先检查一下 `on` 类名是否被正确定义，并且在点击事件后是否被正确地添加或移除。如果问题仍未解决，可以提供更多相关代码和错误信息，以便更好地帮助你解决问题。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图书商城-图书列表</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="/BookShopSystem_war/layui/css/layui.css"> <link rel="stylesheet" href="/BookShopSystem_war/static/css/index.css"> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <div class="layui-container"> <div class="hot-sell" v-if="bookAll.length > 0"> <div class="layui-row layui-col-space20"> <table> <tr> <td v-for="(bk,index) in currentBookAll" :key="index" class="layui-col-xs2" style="margin-left: 30px"> <a :href="'detail?id='+bk.bookId" class="text"> <div><img :src="'/BookShopSystem_war/' + bk.image1"></div> <p>{{bk.bookName}}</p> <p class="price">￥{{bk.bookPrice}}</p> </a> </td> </tr> </table> </div> </div> </div> <div id="houseList"></div> </div>  <iframe src="footer.html" frameborder="0" scrolling="no" width="100%" height="245px"></iframe> </div> <script src="/BookShopSystem_war/layui/layui.js"></script>这是完整的html代码，请结合你给出的分页功能整合出完整的代码

好的，以下是结合分页功能的完整代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图书商城-图书列表</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="/BookShopSystem_war/layui/css/layui.css"> <link rel="stylesheet" href="/BookShopSystem_war/static/css/index.css"> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <div class="layui-container"> <div class="hot-sell" v-if="bookAll.length > 0"> <div class="layui-row layui-col-space20"> <table> <tr> <td v-for="(bk,index) in currentBookAll" :key="index" class="layui-col-xs2" style="margin-left: 30px"> <a :href="'detail?id='+bk.bookId" class="text"> <div><img :src="'/BookShopSystem_war/' + bk.image1"></div> <p>{{bk.bookName}}</p> <p class="price">￥{{bk.bookPrice}}</p> </a> </td> </tr> </table> </div> </div> <div class="layui-row"> <div class="layui-col-md12"> <div id="pagination"></div> </div> </div> </div> <div id="houseList"></div>  <iframe src="footer.html" frameborder="0" scrolling="no" width="100%" height="245px"></iframe> </div> <script src="/BookShopSystem_war/layui/layui.js"></script> <script> layui.use('laypage', function(){ var laypage = layui.laypage; var vm = new Vue({ el: '#app', data: { bookAll: [], current: 1, totalPage: 1, currentBookAll: [] }, mounted: function() { var _this = this; axios.get('/BookShopSystem_war/book/all') .then(function(response) { _this.bookAll = response.data; _this.totalPage = Math.ceil(_this.bookAll.length / 10); _this.currentBookAll = _this.bookAll.slice(0, 10); laypage.render({ elem: 'pagination', count: _this.bookAll.length, curr: _this.current, limit: 10, layout: ['prev', 'page', 'next', 'skip'], jump: function(obj, first){ if(!first){ _this.currentBookAll = _this.bookAll.slice((obj.curr-1)*obj.limit, obj.curr*obj.limit); } } }); }) .catch(function(error) { console.log(error); }); } }); }); </script> </body> </html> 注意：这里的分页功能使用了 layui 的 laypage 组件，需要在页面中引入 layui.js 和 layui.css，并且需要在 Vue 的 mounted 钩子函数中调用 laypage.render() 方法来渲染分页组件。同时，需要注意在分页回调函数中更新当前显示的数据。

<div class="hot-sell"> <p class="house-title">热销推荐<a href="">更多优品 ></a></p> <div class="layui-row layui-col-space20"> <table> <tr v-for="(hot,index) in hotSellers" :key="index"> <a href="detail.html" class="layui-col-xs3 text"> <div><img src="/BookShopSystem_war/static/img/home_img4.jpg"></div> <p>{{hot.bookId}}</p> <p class="price">￥{{hot.bookPrice}}</p> </a> </tr> </table> </div> </div>该代码控制台报错，显示vue.min.js:6 ReferenceError: hot is not defined，应该如何解决

该错误提示是因为在模板中使用了未定义的变量 hot。可能是因为 hotSellers 数组中没有任何元素导致的。为了避免这个错误，可以在渲染 hotSellers 数组之前，先进行判断。可以使用 v-if 指令来判断数组是否为空，如果为空，则不进行渲染。可以将代码修改为如下形式： ``` <div class="hot-sell" v-if="hotSellers.length > 0"> <p class="house-title">热销推荐<a href="">更多优品 ></a></p> <div class="layui-row layui-col-space20"> <table> <tr v-for="(hot,index) in hotSellers" :key="index"> <a href="detail.html" class="layui-col-xs3 text"> <div><img src="/BookShopSystem_war/static/img/home_img4.jpg"></div> <p>{{hot.bookId}}</p> <p class="price">￥{{hot.bookPrice}}</p> </a> </tr> </table> </div> </div> ``` 这样，就可以避免在 hotSellers 数组为空时出现未定义变量的错误了。

阅读全文

相关推荐

软件工程形形考作业3：基于UML的大学图书馆图书信息管理系统设计实验-.pdf

毕业设计：基于Python-Flask的在线图书管理系统.zip

docker-supervisord-example:Docker Supervisord 示例

热销推荐更多优品 > {{hot.bookId}} ￥{{hot.bookPrice}} 该代码控制台报错，显示未定义hot，应该如何解决

</form> 书籍编号 书籍名字 书籍数量 书籍详情 操作 <c:forEach var="book" items="${booksList}"> ${book.bookID} ${book.bookName} ${book.bookCounts} ${book.detail} 更改 | 删除 </c:forEach> 改为html语言

<update id="updateOrderStatusThree" parameterMap="orderStatusResult"> update orders o inner join order_detail od on o.order_id = od.order_id set od.status = 3 where o.order_num = #{orderNum} and od.book_id = #{bookId} </update>该语句报错，为什么

2015-2024软考中级信息安全工程师视频教程网课程真题库课件复习材料.zip

大家在看

AGV硬件设计概述.pptx

DSR.rar_MANET DSR_dsr_dsr manet_it_manet

VITA 62.0.docx

年终活动抽奖程序，随机动画变化

形成停止条件-c#导出pdf格式

最新推荐

2015-2024软考中级信息安全工程师视频教程网课程真题库课件复习材料.zip

智慧城市安防-YOLOv11夜间低光环境下的异常行为检测实战.pdf

农业智能化革命-YOLOv11实现多作物叶片实时分割与表型分析.pdf

基于布莱克曼窗的99阶FIR滤波器设计，实现50MHz采样频率下的1.5MHz通带滤波，图例展示滤波效果,Quartus仿真下的FIR滤波器设计：采用布莱克曼窗，99阶，50MHz采样频率与1.5MH

Spring Websocket快速实现与SSMTest实战应用

电力电子技术的智能化：数据中心的智能电源管理

通过spark sql读取关系型数据库mysql中的数据

新版微软inspect工具下载：32位与64位版本

如何运用电力电子技术实现IT设备的能耗监控

2635.656845多位小数数字，js不使用四舍五入保留两位小数，然后把结果千分位，想要的结果是2,635.65;如何处理

</form> 书籍编号书籍名字书籍数量书籍详情操作 <c:forEach var="book" items="${booksList}"> ${book.bookID} ${book.bookName} ${book.bookCounts} ${book.detail} 更改 | 删除 </c:forEach> 改为html语言