购物车
数据
[
{
"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){
// num : 是管道符前面的值;返回值是页面显示的值
return num.toFixed(val)
}
},
methods:{
getData(){
// 通过axios请求数据，把请求回来的数据赋值给当前实例的products属性；
axios.get("./carts.json").then(data=>{
// data.data才是我们想要的数据
this.products=data.data;
// 对默认数据进行一次检测
this.checkone();
})
},
checkone(){
// 当input的value发生改变以后，会触发这个方法；执行这个方法，检测所有的value值是否是选中状态；
// 遍历products;找false;
// 点击input，更改了
this.checkAll=this.products.every(item=>{
return item.isSelected;
});
},
changeAll(){
this.products.forEach(item => {
// item : products中的每一项
// 让products中的每一项中的isSelected的属性值跟随这个全选框的变化；
item.isSelected=this.checkAll;
});
},
remove(cur){
// 删除products中的对应那一项
this.products=this.products.filter(item=>item!==cur);
},
sum(){
return this.products.reduce((prev,next)=>{
if(next.isSelected){
// 如果是true,则参与求和计算
return prev+next.productPrice*next.productCount
}else{
// 如果不是true，需要把上一次的求和传给下一次的求和；
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>
// vue : 数据驱动视图
let vm = new Vue({
el:"#app",
data:{
// 属性都会放在vm的实例上
task:[{isSelected:false,title:"去爬山"},{isSelected:false,title:"跑步"}],
val:"",
cur:"",
hash:"#all"
},
created(){
// 监听页面的hash值，当页面hash值发生变化以后，更改data中的hash属性
///window.location.href
console.log(window.location);
window.addEventListener("hashchange",()=>{
this.hash=window.location.hash;
});
},
directives:{
focus(el){// 自动获取鼠标焦点
el.focus();
}
},
computed:{
todo(){// 根据hash值的改变而发生改变；会依赖hash值的变化；
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(){// 如果写函数，默认是执行get方法//过滤出task中对象的属性名isSelected是true的个数
return this.task.filter(item=>item.isSelected).length;
}
},
methods:{
addTodo(){// 新增todo
// this==>vm
//console.log(this.val);
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="";
}
}
})
来源：CSDN
作者：致我逝去的青春
链接：https://blog.csdn.net/wang_js_amateyr/article/details/104675623