vue(六)bootstrap+vue

test.json

[{
    	          "isSelected": false,
    	          "productCover": "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=618052011,155537526&fm=27&gp=0.jpg",
    	          "productName": "深入浅出node.js",
    	          "productInfo":"很好的书啊",
    	          "productPrice": 57.8,
    	          "productCount": 1,
    	          "sex":0
    	        }, {
    	         "isSelected": true,
    	          "productCover": "https://avatar.csdn.net/6/3/E/3_q975583865.jpg",
    	          "productName": "深入浅出node.js",
    	          "productInfo": "很好的书啊",
    	          "productPrice": 57.8,
    	          "productCount": 3,
    	          "sex":1
    	        }]

bootstrap.html

<html>

<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>hello</title>
<!-- 引入样式 -->
	<link rel="stylesheet"
	href="node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>

<body>
	<div id="app">
		<div class="container">
			<div class="row">
				<table class="table table-hover table-bordered">
					<tr>
						<th>全选	<input type="checkbox" v-model="checkAll"></th>
						<td>商品</td>
						<td>单价</td>
						<td>数量</td>
						<td>小计</td>
						<td>操作</td>
					</tr>
					<tr v-for="(product,index) in products">
						<td>
							<input type="checkbox" v-model="product.isSelected">
						</td>
						<td><img :src="product.productCover"></td>
						<td>{{product.productPrice}}</td>
						<td><input type="number" v-model.number="product.productCount" min="1"></td>
						<td>{{product.productPrice*product.productCount | toFixed(2)}}</td>
						<td><button class="btn btn-danger" @click=remove(product)>删除</button></td>
					</tr>
					<tr>
						<td colspan="6">总价格:{{sum | | toFixed(2)}}</td>
					</tr>
				</table>
			</div>
		</div>
	</div>

	<!-- 引入组件库 -->
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
	<script src="node_modules/axios/dist/axios.js"></script>
	<script>
    let vm = new Vue({
      el: '#app',
      //computed计算属性，如果数据没变，被依赖的数据没变不会重新执行
      computed:{
    	  checkAll:{
    		  //当products值变化会重新计算
    		  get(){
    			  return this.products.every(p=>p.isSelected);
    		  },set(val){
    			  this.products.forEach(p=>p.isSelected = val);
    		  }
    	  },
    	  sum:{ //sum的结果会被缓存，如果被依赖的数据没变不会重新执行
    		  get(){
    			  return this.products.reduce((prev,next)=>{
  				    if(!next.isSelected){return prev;} //不勾选的不计算总和
  				  return  prev+next.productPrice*next.productCount;
                    },0);
    		      }
    	      }
      },
      created(){ //在数据初始化会调用
    	  this.getData();
      },
      filters:{
    	  	toFixed(input,param1){
    	  		return '￥'+input.toFixed(param1);
    	  	}
      },
      methods:{
    	  getData(){
    		  axios.get('./test.json').then(res=> {//success
    	          this.products=res.data;
    	        },err=>{//error
    	          console.log('error'); 
    	        });
    	  	  },
   			formatSex: function (row, column, cellValue, index) {
   				return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
   			},
   			remove(p){
   				this.products = this.products.filter(item=>item!==p); 
   			}
      },
      data: {
    	  products: [],
      }
    })
  </script>

</body>

</html>

猜你喜欢