<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是能获取到数据并遍历了出来，是因为静态数组不需要渲染，而vue需要渲染的是动态数组，

时间: 2023-10-11 18:11:47 浏览: 147

你的理解是正确的，静态数组不需要渲染，而动态数组需要渲染。在你使用未被注释的动态数组时，点击事件没有生效，可能是因为 Vue.js 的响应式系统没有监听到数组的变化，导致无法更新视图。你可以尝试使用 Vue.js 提供的响应式数组方法来更新数组，例如 `Vue.set` 或者 `this.$set`。另外，在Vue.js 中，最好不要直接操作数组的某一项，而是应该通过 `splice` 或者 `Vue.set` 等方法来进行数组的增加、删除、修改等操作，这样可以更好地保证响应式系统的正常工作。

<!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语言

this->bookId = id;

修改代码 const add=()=>{ axios.post("/shelf/add",{ user_id:localStorage.getItem("id"), book_id:route.query.bookId }).then((res)=>{ const data = res.data console.log(data) }) }

最新推荐

基于对知乎热榜话题的数据抓取分析与可视化python实现源码+文档说明（高分完整项目）

电子技术课程 电路分析技术 12 非正弦周期电流电路及电路频率特性 共43页.pptx

(完整数据)全国及各省森林覆盖率、森林面积，700个城市绿地面积、绿化率等数据

C语言数组操作：高度检查器编程实践

管理建模和仿真的文件

【KUKA系统变量进阶】：揭秘从理论到实践的5大关键技巧

如何使用Python编程语言创建一个具有动态爱心图案作为背景并添加文字'天天开心（高级版）'的图形界面？

基于Swift开发的嘉定单车LBS iOS应用项目解析

"互动学习：行动中的多样性与论文攻读经历"

PROTEUS符号定制指南：个性化元件创建与修改的全面攻略

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

电子技术课程电路分析技术 12 非正弦周期电流电路及电路频率特性共43页.pptx