<body>
<div id="box">
<table>
<thead>
<tr>
<th><input type="checkbox" style="margin-left:35px" @click="allChoose($event)"> 全选</th>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
</tr>
</thead>
<tbody>
<tr v-if='shop.length' v-for='(item,index) in shop'>
<td><input type="checkbox" :value='index' v-model='choose'></td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>{{item.num}}</td>
<td>{{choose.includes(index)?total[index]:""}}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总计</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
</div>
<script src="./js/vue.js" type="text/javascript" ></script>
<script type="text/javascript">
// 主要思路 -1-利用计算属性computed得出所有小计--注意类型-此处是数组-取用的时候注意下标
// 2- 利用v-model(复选框绑定:value v-model的值就是 input框的value值 ) 每次点击复选框 将index添加到v-model绑定的数组中
// 取消时,自动从数组中消失
// 3-上面两步可以达到-单选-得到对应行的数据--但是会将其他列一并渲染
// 4-在渲染的时候--加上判断--(可以判断当前index是否处在 v-model绑定的数组中,来决定是否渲染)
// 5-最后全选--直接把 数据(数组)-遍历得到所有下标--添加到 v-model绑定的数组中--即每一个index都在数组中--全部渲染
var ve= new Vue({
el:'#box',
data:{
choose:[],
// addIndex:'',
shop:[{
name:'小米',
price:100,
num:10
},
{
name:'华为',
price:80,
num:8
},
{
name:'中兴',
price:60,
num:15
}]
},
computed:{
// 计算属性 里面是一个方法 需要有返回值--这里返回了所有的小计--数组--用的时候要注意
total(){
return this.shop.map((item)=>{
return item.price*item.num
})
}
},
// 不用监听
// watch:{
// choose:{
// handler(newValue,oldValue){
// // 监听的是一个对象 new,old两个值也是对象
// for (let i=0;i<newValue.length;i++){
// // 每次监听属性值的改变--导致将对应的index添加到newValue中--通过比较--取出新增加的值--
// if(newValue[i] != oldValue[i]){
// // console.log(newValue[i])
// this.addIndex=newValue[i]
// }
// }
// },
// deep:true,
// }
// },
methods:{
allChoose(e){
if(!e.target.checked){
this.choose=[]
return
}
for(let i=0;i<this.shop.length;i++){
this.choose.push(i)
}
}
}
})
</script>
</body>
4258
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
