vue实现按钮多选,vue实现全选功能
这篇文章主要为大家详细介绍了某视频剪辑软件实现商品多选功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现商品多选功能的具体代码，供大家参考，具体内容如下
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta name= viewport content= width=device-width，initial-scale=1.0
meta http-equiv= X-UA-Compatible content= ie=edge
titlevue实现实现全选，结算/标题
/头
风格
*{
边距：0;
填充：0;
列表样式：无；
}
#app{
宽度：80%;
边距：自动；
}。换行{
宽度：100%;
边距：自动；
}。尚佳{
字体大小：20;
字体粗细：粗体；
颜色：# 000;
高度：36px
行高：36px
}。已检查_输入{
右边距：10px
左边距：10px
}。all_list{
填充顶部：10px
宽度：100%;
边距：自动；
背景：# bbb
}。list_item{
宽度：80%;
显示器：flex
对齐-内容：灵活开始；
位置：相对；
保证金：3px 0；
填充：6px 0；
}
img{
显示：内嵌-块；
}。列表框{
显示：内嵌-块；
}。list_img_tit_price{
显示：内嵌-伸缩；
align-content:space-between；
}。list_img{
宽度：100像素
高度：100像素
}。清单_标题_价格{
显示器：flex
灵活流动：列；
左边距：10px
字体大小：16px
justify-content:space-between；
}。总计{
显示：内嵌-伸缩；
柔性包装：世界其他地区；
浮动：对；
边距-顶部：60px
左边距：20px
}。num _ cancle。数量_添加
{
字体大小：20px
字体粗细：加粗；
边距：0 2px
填充：1PX
行高：36px
}。悬停，num_add:hover{
光标：指针；
}。数量_总数{
宽度：30px
文本对齐：居中；
字体粗细：粗体；
}。结果{
浮动：对；
显示：内嵌-伸缩；
}。和记
边距：0 12px
填充：3px
}。jisuan_btn{
颜色：# fff
背景：# f30
字体大小：18px
字体粗细：粗体；
填充：3px
边框样式：无；
}
/风格
身体
div id=应用程序
div class=wrap上佳
输入类型=复选框 class= checked _ input v-model= checked all 选择商家全部商品
/div
全部换行_列表
保险商实验所
里
v-for=(item，index) in allList
class=list_item
投入
v-model=item.checked
type=checkbox
class=checked_inpu
div class=list_box
div class=list_img_tit_price
img:src= item。src alt= class= list _ img
div class=list_tit_price
div{{item.title}}/div
div style= color:red；@{ { item。价格} }/div
/div
/div
div class=合计
div class= num _ canle @ click= control num( canle ，index)-/div
输入类型= text class= num _ total 垂直模型。编号= item。“订单”
div class= num _ add @ click= control num( add ，index) /div
/div
/div
/李
/ul
/div
div class=wrap
输入类型=复选框 class= checked _ input v-model= checked all 全选
div class=result
div class=heji 合计：span{{amountPrice}}/span/div
button class=jisuan_btn 去结算({{sumTotal}})/button
/div
/div
/div
/body
脚本src= ./vue。js /脚本
脚本
const vm=new Vue({
埃尔： #app ，
数据：{
所有列表：[
{
标题：【第一】黄河之水天上来，奔流到海不复回，
src:“./img/1.jpg ，
价格：880,
订单：1,
id:0
},
{
标题：【第二】黄河之水天上来，奔流到海不复回，
src:“./img/2.jpg ，
价格：881,
订单：1,
id:1
},
{
标题：【第三】黄河之水天上来，奔流到海不复回，
src:“./img/3.jpg ，
价格：882,
订单：1,
id:2
},
{
标题：【第四】黄河之水天上来，奔流到海不复回，
src:“./img/4.jpg ，
价格：883,
订单：1,
id:3
},
{
标题：【第五】黄河之水天上来，奔流到海不复回，
src:“./img/5.jpg ，
价格：884,
订单：1,
id:4
},
{
标题：【第六】黄河之水天上来，奔流到海不复回，
src:“./img/6.jpg ，
价格：885,
订单：1,
id:5
},
]
},
方法：{
controlNum(temp，index){
if(temp===add){
this.allList[index].订单；
}否则{
if(this.allList[index].order=1){
警报(数量不能小于一了哟！)
返回；
}
this.allList[index].订单-;
}
}
},
计算值：{
selectTotal(){
返回这个。所有列表。过滤器(El=El。已检查)
},
金额价格(){
设价格=0;
this.selectTotal.forEach(el={
价格=价格*订单
})
退货价格；
},
sumTotal(){
设总计=0；
对于(设I=0；我这个。选择总计。长度；i ){
total=this.selectTotal[i].订单；
}
返回总数；
},
选中单击(e){
返回e；
},
checkedAll:{
get(){
返回这个。所有列表。every(El=El。已检查)
},
设置（值){
这个。所有列表。foreach(El=El。checked=val)
}
}
}
})
forEach(el=vm .$set(el， checked ，false))；
/脚本
/html
未全选
全选
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。