首先需要用到input裡的 checkbox屬性選擇框vue實現購物車簡單的功能-----單選全選總價計算、批量刪除等：
以下附上全部的**
doctype html>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
link
href
=""rel="stylesheet"
>
<
script
src="./vue.js"
>
script
>
<
title
>title
title
>
head
>
<
script
>
window.onload
=function
() ,,,
,,,,
,,,],
//控制全選
allchecked:
true
,
//存放被選擇的資料
allselectedgoods:
},methods:
else
this
.goods.splice(k, 1);
console.log(
this
.allselectedgoods)}},
//增減數量
changenum(k, num, type)
}else
},//點選全選按鈕
selectall()
else
) }
console.log(
this
.allselectedgoods)
},//點選單選按鈕
selectsingle(k)
else}}
console.log(
this
.allselectedgoods)
},//批量刪除
delselect()
}//這種寫法是錯誤的，因為陣列每次刪除一條資料以後索引值會發生變化，所以用上述的倒敘刪除，先刪除索引大的資料
/*this.goods.foreach((v, k) =>
});*/}
console.log(
this
.allselectedgoods)}},
computed: );
*///
加入選擇框以後的計算總價
this
.goods.foreach((v, k)
=>
});return
totalprice},}
})}script
>
<
body
>
<
div
class
="container"
id>
<
div
class
="row"
>
<
div
class
="panel panel-default"
>
<
div
class
="panel-heading"
>
<
div
class
="panel-title"
>購物車
div>
<
div
style
="text-align: right"
>
<
button
type
="button"
class
="btn btn-danger"
@click
="delselect()"
>批量刪除
button
>
div>
div>
<
div
class
="panel-body"
>
<
table
class
="table table-hover"
>
<
thead
>
<
tr>
<
th><
input
type
="checkbox"
@click
="selectall()"
:checked
="goods.length===allselectedgoods.length&&goods.length"
>
th>
<
th>商品名稱
th>
<
th>商品單價
th>
<
th>購買數量
th>
<
th>小計
th>
<
th>操作
th>
tr>
thead
>
<
tr v-for
="(v,k) in goods"
v-show
="goods.length!==0"
>
<
td><
input
type
="checkbox"
@click
="selectsingle(k)"
:checked
="allselectedgoods.indexof(v.id)>=0"
>
td>
<
td>}
td>
<
td>￥}
td>
<
td>
<
button
type
="button"
style
="width:25px;text-align: center"
@click
="changenum(k,v.num,-1)"
>
-
button
>
<
input
type
="text"
v-model
="v.num"
style
="width:25px;text-align: center"
>
<
button
type
="button"
style
="width:25px;text-align: center"
@click
="changenum(k,v.num,1)"
>
+
button
>
td>
<
td>}
td>
<
td>
<
button
type
="button"
class
="btn btn-danger btn-xs"
@click
="del(k)"
>刪除
button
>
td>
tr>
table
>
<
span
v-show
="goods.length===0"
style
="text-align: center"
><
h1>購物車為空
h1>
span
>
div>
<
div
class
="panel-footer"
style
="text-align:right"
>
共計￥<
span
>}
span
>
元
div>
div>
div>
div>
body
>
html
>
vue複選功能實現
演示圖 splice函式的簡單說明 splice index,len,item 1 可以用來新增 刪除 替換陣列內某乙個或者幾個值 2 該方法會改變原始陣列 index 陣列開始下標 len 替換 刪除的長度 item 替換的值，刪除操作的話 item為空 來新增 刪除 替換陣列內某乙個或者幾個值 ...
vue實現核取方塊checkbox
效果圖 tempdata 核取方塊資料來源 checkboxidstrs 1,3 假設這是你從資料庫裡取出的資料 checkboxidstr 注意這個一定要是陣列的形式，這樣v model繫結ckeckbox才會自動選中created function 2021 1 22 更新 另一種情況 選中是1...
vue實現置頂功能
需求背景 專案中需要將某個標題置頂，但element沒有支援置頂的元件，所以手動實現 原生js 效果如下圖 1 解決思路 先找到當前頁面，滾動條所在dom，然後新增滾動條監聽事件，對比滾動條的高度和置頂內容的offsettop高度，大於則開啟置頂，小於則還原。2 話不多說上 示例 123 4置頂部分...