<div id="app">
<!-- table>(thead>tr>td*6)+(tbody>tr>td*6) -->
<!-- 结尾 ctrl+i 激活提示, 按回车 -->
<table border="1">
<thead>
<tr>
<!-- v-model 双向绑定 -->
<!-- 1. 数据影响DOM元素 -->
<!-- 2. DOM元素变化时影响数据 -->
<!-- 看实际需求决定要不要双向绑定 -->
<!-- checked: 普通的HTML属性, 代表是否勾选 -->
<td>
<input
@change="chaChanged"
type="checkbox"
:checked="cha_status"
/>全选
</td>
<td>序号</td>
<td>名称</td>
<td>单价</td>
<td>数量</td>
<td>小计</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<!-- 循环的 参数变量名随意 -->
<tr v-for="(p,i) in products">
<td><input type="checkbox" v-model="p.checked" /></td>
<td>{{i+1}}</td>
<td>{{p.name}}</td>
<td>¥{{p.price}}</td>
<td>
<button :disabled="p.count==1" @click="p.count--">-</button>
<span>{{p.count}}</span>
<button @click="p.count++">+</button>
</td>
<td>¥{{p.price * p.count}}</td>
<td>
<!-- 数组方法:删除指定序号的元素?? -->
<!-- 数组.splice(i,a,b): 从序号i位置删除a个元素, 然后添加b元素到里面 -->
<button @click="products.splice(i,1)">删除</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<!-- 计算属性total, 不需要()就能触发 -->
<td colspan="8">合计: {{total}}</td>
</tr>
</tfoot>
</table>
</div>
<script src="./vendor/vue.js"></script>
<script>
new Vue({
el: '#app',
methods: {
// 全选按钮点击后, 值变化时触发
chaChanged(e) {
console.log(e)
//读取勾选框的
const checked = e.target.checked
// 把每个商品的勾选框状态, 都等于 全选按钮的
this.products.forEach(v => v.checked = checked)
// v : value的缩写, 因为懒..
},
},
// 计算属性: 使用时不用() 就会自动基础
computed: {
// 全选->每一个都是选中
cha_status() {
// js 的day03 高阶函数
return this.products.every(value => value.checked)
},
total() {
return this.products.reduce((sum, value) => {
const { price, count, checked } = value
// 利用 checked是布尔类型, true->1 false->0
// 乘0 =0 的特点, 只计算勾选是true的商品总和
return sum + price * count * checked
}, 0)
},
},
data: {
products: [
// checked: 代表是否勾选
{ name: '高达', price: 99, count: 5, checked: true },
{ name: '奥特曼', price: 9900, count: 15, checked: false },
{ name: '迪迦', price: 199, count: 1, checked: false },
{ name: '龙珠', price: 299, count: 5, checked: true },
],
},
})
</script>
</body>