购物车
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="bootstrap.min.css">
<style>
.main {
width: 800px;
height: 800px;
margin: 0 auto;
margin-top: 50px;
text-align: center;
}
</style>
</head>
<body>
<div class="main">
<table class="table">
<tr>
<td>
<input type="checkbox" v-model="allchecked" @change="checkall()">全选
</td>
<td>编号</td>
<td>名字</td>
<td>价格</td>
<td>数量</td>
<td>金额</td>
<td>操作</td>
</tr>
<tr v-for="(goods,index) in goodslist">
<td>
<input type="checkbox" v-model="goods.checked" @change="backCheck()">
</td>
<td>{{goods.id}}</td>
<td>{{goods.name}}</td>
<td>{{goods.price}}</td>
<td>
<input type="button" value=" - " class="btn btn-info" @click="reduce(index)">
{{goods.count}}
<input type="button" value=" + " class="btn btn-info" @click="add(index)">
</td>
<td>{{goods.count*goods.price}}</td>
<td>
<input type="button" value="删除" class="btn btn-danger" @click="deleteGoods(index)">
</td>
</tr>
</table>
<hr>
<p>总金额：{{totalMoney()}}</p>
</div>
</body>
</html>
<script src="vue.js"></script>
<script>
let vm = new Vue({
el: ".main",
data: {
allchecked: false, //全选的
goodslist: [
{ checked: false, "id": "01001", "name": "铅笔", "price": 1.5, "count": 5 },
{ checked: false, "id": "01002", "name": "钢笔", "price": 35, "count": 2 },
{ checked: false, "id": "01003", "name": "毛笔", "price": 25, "count": 1 },
{ checked: false, "id": "01004", "name": "签字笔", "price": 5, "count": 2 }
]
},
methods: {
checkall() {
this.goodslist.forEach(goods => {
goods.checked = this.allchecked
});
},
backCheck() {
let isAllCheck = true;
for (let i = 0; i < this.goodslist.length; i++) {
if (this.goodslist[i].checked === false) {
isAllCheck = false;
break;
}
}
this.allchecked = isAllCheck;
// 最简单的写法？？？
// this.allchecked = !this.goodslist.some(item => item.checked == false);
},
add(num) {
this.goodslist[num].count++;
},
reduce(num) {
if (this.goodslist[num].count <= 0) {
return
}
this.goodslist[num].count--;
},
totalMoney() {
let money = 0;
this.goodslist.forEach(goods => {
if (goods.checked === true) {
money += goods.count * goods.price
}
})
return money;
},
deleteGoods(num) {
if (confirm("亲，您真的真的，真的要删除吗？")) {
this.goodslist.splice(num, 1)
}
}
},
})
</script>
todolist
<!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>
<style>
ul {
list-style: none;
}
/* 已完成状态的样式 */
.completecls {
color: grey;
background-color: aliceblue;
text-decoration: line-through;
}
/* 处于非编辑状态的样式 */
.noEdit {
outline: none;
border: none;
}
</style>
</head>
<body>
<div id="app">
<h1>任务列表</h1>
<p>任务总数：{{tasks.length}}，还有{{totalNoComplete()}}未完成， <input type="button" value="删除" @click="del()">已完成任务</p>
<ul>
<li v-for="task in tasks">
<input type="checkbox" v-model="task.isComplete">
<input type="text" v-bind:class="{noEdit:!task.isEdit ,completecls:task.isComplete}" v-model="task.text"
:disabled="task.isComplete" @focus="task.isEdit=true" @blur="task.isEdit=false" />
</li>
</ul>
<input type="text" placeholder="请输入任务名" v-model="newTask">
<input type="button" value="添加" @click="addTask()">
</div>
</body>
</html>
<script src="vue.js"></script>
<script>
// todoList需求：
// 1、显示所有的todolist (已ok)
// 2、添加任务 (已ok)
// 3、修改任务内容 (已ok)
// 4、修改任务的状态：让任务的状态变成已完成 (已ok)
// 5、删除已完成的任务 (已ok)
// 6、统计任务数量（总数，未完成任务数量）(已ok)
// 7、本地存储。
let vm = new Vue({
el: "#app",
data: {
newTask: "",
tasks: [
{
text: "写html",
isComplete: false,
isEdit: false //当前任务是否处于编辑状态
},
{
text: "写css",
isComplete: false,
isEdit: false //当前任务是否处于编辑状态
},
{
text: "写js",
isComplete: false,
isEdit: false //当前任务是否处于编辑状态
},
{
text: "写vue",
isComplete: false,
isEdit: false //当前任务是否处于编辑状态
}
]
},
methods: {
addTask() {
this.tasks.push({
text: this.newTask,
isComplete: false,
isEdit: false,
})
this.newTask = ""
},
del() {
if (confirm("真删除吗？")) {
this.tasks = this.tasks.filter(item => item.isComplete === false)
}
},
totalNoComplete() {
let count = 0;
this.tasks.forEach(item => {
if (item.isComplete === false) {
count++
}
});
return count;
}
}
});
</script>