vue(六)bootstrap+vue

最新推荐文章于 2024-05-31 09:51:05 发布

一点寒芒先至

最新推荐文章于 2024-05-31 09:51:05 发布

阅读量695

点赞数

分类专栏： vue等前端

vue等前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

bootstrap.html

<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>hello</title>
<!-- 引入样式 -->
	<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.css" rel="stylesheet">
</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/vue@2.5.17/dist/vue.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.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(){
		  
		 const a= [{
    	          "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
    	        }]

    		
    	          this.products=a;
    	        
    	  	  },
   			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>

一点寒芒先至

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue(六)bootstrap+vue

bootstrap.html &lt;html&gt; &lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html;charset=UTF-8"&gt;&lt;title&gt;hello&lt;/title&gt;&lt;!-- 引入样式 --&gt; &lt;link hr
复制链接

扫一扫

专栏目录