本文展示了如何在HTML页面中结合Vue和jQuery，实现全选、商品列表展示、点击事件处理等功能。通过引入jQuery和Vue库，设置样式和布局，利用Vue的数据绑定和事件监听，以及jQuery的DOM操作，完成商品的全选、单选、数量增减及总价计算。同时，文章涵盖了前端数据交互和页面动态更新的基本操作。
1.div
1.在head，引入jQuery链接，写函数和点击事件
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<!-- jQuery主要是函数和点击事件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- vue前后端交互和数据获取 -->
2.页面显示的设置
<style>
.nav {
flex: 1;
}.con {
flex: 1;
}.con img {
height: 100px;
width: 100px;
}
</style></head>
<body>
<div>
<div id="app" style="width: 1200px;height: 1000px;margin: 0 auto;">
<div style="font-weight: 600;font-size: 25px;">全部商品</div>
<div style="display: flex; height: 50px;background-color: hsl(0, 0%, 88%);align-items: center;">
<!--1.在导航栏设置的捆绑，以便下面全选就会全选，设置了选择的盒子-->
<div class="nav"><input v-model="allchecked" @change="changeCheckBox" type="checkbox" />全选</div>
<!--2. v-model=绑定，@change=点击之后发生的函数 -->
<div class="nav" style="flex: 1;margin-right: 150px;">商品名称</div>
<div class="nav">发货站</div>
<div class="nav">价格</div>
<div class="nav">数量</div>
<div class="nav">金额</div>
<div class="nav">操作</div>
</div>
<!--3.遍历数组内容，vue自动获取-->
<div v-for="(i,index) in goods" style="display: flex; height: 150px;align-items: center;margin-top: 20px;">
<!--4.v-model="i.checked" ,与导航栏的绑定了，点击之后发生变化的内容-->
<div class="con"><input type="checkbox" v-model="i.checked" @change="changeGoodsCheckedBox" /><img:src="i.img" alt=""></div>
<!-- v-model="i."用指针来指这个内容，绑定了这个内容 @change="changeGoodsCheckedBox点击之后发生的事件--><div class="con">
<div class="con">{{i.name}}</div>
<div class="con" style="flex: 1;display: inline-block;white-space:nowrap">
{{i.pos}}</div>
</div>
<div class="con">{{i.pos}}</div>
<div class="con">{{i.print}}</div>
<!--5.一开始设置成-1就是不显示-->
<div class="con"><button @click="altercount(i,-1)">-</button>{{i.count}}<button
@click="altercount(i,1)">+</button>
</div>
<div class="con" style="color: red;">￥{{(i.print * i.count).toFixed(2)}}</div>
<!-- 5.2toFixed(2)限制小数为2位 -->
<div class="con">删除</div>
</div>
<hr style="background-color:#e1e1e1 ;">
<div><input type="checkbox">全选</div>
<!--6.页面设置了变量，下面script里面也要记得定义变量-->
<div>总件数：{{totalcount}}</div>
<div>总价格：{{totalprice.toFixed(2)}}</div></div>
</div>
2.script
3.点击事件和函数的设置
<script>
var app = new Vue({
el: '#app',data: {
// 1.任何变量的先加都要放在data里面
totalprice: 0,
totalcount: 0,
allchecked: false,//2.一开始导航的点击设置false就是不执行
goods: [//3.遍历的数组内容
{ name: "会哭抱枕", pos: "珠海", print: 20, count: 1, img: "./1.jpg", monery: 20 },
{ name: "滑稽抱枕", pos: "珠海", print: 20, count: 1, img: "./2.jpg", monery: 20 },
{ name: "狗屎抱枕", pos: "珠海", print: 20, count: 1, img: "./3.jpg", monery: 20 }]
},
created: function () {
// 4.最开始就运行这个程序，就是计算器
this.counter();
},
methods: {
counter() {//5.计算器
this.totalcount = 0;
this.totalprice = 0;
//.先加价格转为0，才可以先加，不然会重复加开始的价格
for (let i of this.goods) {
if (i.checked){
this.totalcount += i.count;
this.totalprice += i.count * i.print;
// 计算件数*单价多少钱
// 判断是否选中，选中才计算价格
}
}
},
//6.判断一开始设置-1的指针有没有指东西，有就进行价格和件数的计算
altercount(i, val) {
i.count += val;
i.count = Math.max(i.count, 1);
this.counter();
// 算件数‘判断大小件数是否大于1，大于1就赋值到这个指定的件数；再运行总价格总件数
},
//7.导航栏的点击事件，点了这个件，就会选中全部商品
changeCheckBox() {
for (let i of this.goods) {
i.checked = this.allchecked;
// 全选点击之后的事件，点击之后，遍历的将allchecked的属性，赋值给每一个checked，
// 前面绑定了这个 v-model="i.checked"
}
this.counter();//再次计算价格
},
//8.商品栏全部点击之后，导航栏的全选也会勾上
changeGoodsCheckedBox() {
// 设置全选的点击事件
let allCheck = true;
for (let i of this.goods) {
if (!i.checked) {
allCheck = false
}
}
this.allchecked = allCheck;
this.counter();
},}
})
</script>
297
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
