|
|
@@ -12,6 +12,9 @@
|
|
|
.close{
|
|
|
float: right;
|
|
|
}
|
|
|
+ .active{
|
|
|
+ background: red;
|
|
|
+ }
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
@@ -28,8 +31,8 @@
|
|
|
<button @click="search()">搜索</button>
|
|
|
</div>
|
|
|
<ul>
|
|
|
- <li v-for="(obj,index) in list" v-show="obj.isShow">
|
|
|
- <input type="checkbox">
|
|
|
+ <li v-for="(obj,index) in list" v-show="obj.isShow" :class="{active:obj.isChecked}">
|
|
|
+ <input type="checkbox" v-model="obj.isChecked">
|
|
|
<span>{{obj.name}}</span>
|
|
|
<span>{{obj.price}}</span>
|
|
|
<span class="close" @click="del(index)">[X]</span>
|
|
|
@@ -37,7 +40,7 @@
|
|
|
</ul>
|
|
|
<div>
|
|
|
<button>删除选择</button>
|
|
|
- <span>总价</span>
|
|
|
+ <span>总价{{total()}}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<script src="vue.js"></script>
|
|
|
@@ -48,11 +51,13 @@
|
|
|
list:[{
|
|
|
name:'苹果',
|
|
|
price:5,
|
|
|
- isShow: true
|
|
|
+ isShow: true,
|
|
|
+ isChecked: false
|
|
|
},{
|
|
|
name:'香蕉',
|
|
|
price:6,
|
|
|
- isShow: true
|
|
|
+ isShow: true,
|
|
|
+ isChecked: false
|
|
|
}],
|
|
|
name:'',
|
|
|
price:'',
|
|
|
@@ -63,7 +68,8 @@
|
|
|
this.list.push({
|
|
|
name: this.name,
|
|
|
price: this.price,
|
|
|
- isShow: true
|
|
|
+ isShow: true,
|
|
|
+ isChecked: false
|
|
|
})
|
|
|
this.name = ''
|
|
|
this.price = ''
|
|
|
@@ -80,6 +86,15 @@
|
|
|
}
|
|
|
})
|
|
|
this.seachVal = ''
|
|
|
+ },
|
|
|
+ total(){
|
|
|
+ var sum = 0;
|
|
|
+ this.list.forEach(function(obj){
|
|
|
+ if(obj.isChecked){
|
|
|
+ sum += obj.price*1
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return sum
|
|
|
}
|
|
|
|
|
|
}
|
zsydgithub