vue--简单实现全选和单选

<body><div id="box"><table><thead><tr><th><input type="checkbox" style="margin-left:35px" @click="allChoose($event)"> 全选</th>&...

海龟先生plus

2990人浏览 · 2019-08-25 23:49:10

海龟先生plus · 2019-08-25 23:49:10 发布

<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>

在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^