购物车
数据
[
{
"isSelected": false,
"productName": "深入浅出xx",
"productInfo": "颜色:xx学习",
"productPrice": 57.8,
"productCount": 3
},
{
"isSelected": true,
"productName": "深入浅出xx",
"productInfo": "颜色:xx学习",
"productPrice": 57.8,
"productCount": 3
}
]
在这里插入代码<body>
<div id="app">
<div class="container">
<div class="row">
<table class="table table-bordered">
<caption class="text-center h2 text-danger">购物车</caption>
<tr>
<td>全选<input type="checkbox" v-model="checkAll" @change="changeAll"></td>
<td>商品</td>
<td>单价</td>
<td>数量</td>
<td>小计</td>
<td>操作</td>
</tr>
<tr v-for="item in products">
<td><input type="checkbox" v-model="item.isSelected" @change="checkone"></td>
<td>
<img :src="item.productCover" alt="">
</td>
<td>{{item.productPrice}}</td>
<td>
<input type="number" v-model="item.productCount" min="0">
</td>
<td>{{item.productPrice*item.productCount| toFixed(2)}}</td>
<td>
<button class="btn btn-danger text-center" @click="remove(item)">删除</button>
</td>
</tr>
<tr>
<td colspan="6">总计:{{sum()|toFixed(2)}}</td>
</tr>
</table>
</div>
</div>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/axios/dist/axios.js"></script>
<script>
let vm= new Vue({
el:"#app",
data:{
products:[],
checkAll:false
},
created(){
this.getData()
},
filters:{
toFixed(num,val){
return num.toFixed(val)
}
},
methods:{
getData(){
axios.get("./carts.json").then(data=>{
this.products=data.data;
this.checkone();
})
},
checkone(){
this.checkAll=this.products.every(item=>{
return item.isSelected;
});
},
changeAll(){
this.products.forEach(item => {
item.isSelected=this.checkAll;
});
},
remove(cur){
this.products=this.products.filter(item=>item!==cur);
},
sum(){
return this.products.reduce((prev,next)=>{
if(next.isSelected){
return prev+next.productPrice*next.productCount
}else{
return prev;
}
},0)
}
}
})
</script>片
记事本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
<style>
.del{
text-decoration: line-through;
color:#ccc;
}
</style>
</head>
<body>
<div id="app">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
TodoList
</a>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading" style="background: pink;">
<h2 class="text-danger">亲~^_^,您有{{count}}件事已完成</h2>
<input type="text" class="form-control" @keyup.enter="addTodo" v-model="val">
</div>
<div class="panel-body">
<ul class="list-group">
<li class="list-group-item" v-for="item in todo" @dblclick="remember(item)">
<span v-show="cur!==item">
<input type="checkbox" v-model="item.isSelected">
<span :class="{del:item.isSelected}">{{item.title}}</span>
</span>
<input type="text" v-show="cur===item" v-model="item.title" @blur="update" v-focus>
<button class="btn btn-xs pull-right btn-danger" @click="removeTodo(item)">⨂</button>
</li>
</ul>
</div>
<div class="panel-footer">
<ul class="nav nav-pills">
<li role="presentation" :class="{active:hash==='#all'}"><a href="#all">全部任务</a></li>
<li role="presentation" :class="{active:hash==='#finish'}"><a href="#finish">已完成</a></li>
<li role="presentation" :class="{active:hash==='#unfinish'}"><a href="#unfinish">未完成</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="1.todo.js"></script>
</body>
</html>
let vm = new Vue({
el:"#app",
data:{
task:[{isSelected:false,title:"去爬山"},{isSelected:false,title:"跑步"}],
val:"",
cur:"",
hash:"#all"
},
created(){
console.log(window.location);
window.addEventListener("hashchange",()=>{
this.hash=window.location.hash;
});
},
directives:{
focus(el){
el.focus();
}
},
computed:{
todo(){
if(this.hash==="#all"){
return this.task;
}else if(this.hash==="#finish"){
return this.task.filter(item=>item.isSelected);
}else if(this.hash==="#unfinish"){
return this.task.filter(item=>!item.isSelected);
}
},
count(){
return this.task.filter(item=>item.isSelected).length;
}
},
methods:{
addTodo(){
this.task.push({isSelected:false,title:this.val});
this.val="";
},
removeTodo(obj){
this.task=this.task.filter(item=>item!==obj)
},
remember(obj){
this.cur=obj;
},
update(){
this.cur="";
}
}
})