计算属性就是基于现有的数据推算出来的新属性，只要依赖的数据变化，新属性就会自动更新而且计算属性多次调用的情况下只会计算一次，效率非常高
1.简化写法
2.完整写法
计算属性的值默认情况下是不能直接进行修改的，如果非要修改，就必须使用计算属性的完整写
3.案例演示
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>学生列表</title>
<link href="./css/bootstrap.min.css" rel="stylesheet">
<script src="./js/jquery-2.1.0.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/vue-2.6.12.js"></script>
<script src="./js/axios-0.20.0.js"></script>
<style type="text/css">
td,
th,
h3 {
text-align: center;
}
.active {
background-color: aliceblue
}
.fon {
color: red;
}
tbody tr:nth-child(2n) {
background-color: darkgray;
}
tbody tr:nth-child(2n+1) {
background-color: white;
}
.changeRed {
color: red;
}
tbody tr:hover {
background-color: white !important;
}
.red {
background-color: red !important;
}
.blue {
background-color: blue !important;
}
</style>
</head>
<body>
<div class="container" id="app">
<!--列表-->
<div class="row">
<h3>学生列表</h3>
<div class="col-lg-3"></div>
<div class="col-lg-6">
<table border="1" class="table table-bordered table-hover">
<thead>
<tr class="success">
<th> <input type="checkbox" v-model="selectAll"> 全选</th>
<!-- <th> <input type="checkbox" :checked="allIsChecked" @click="checkedAll"> 全选</th> -->
<th>序号</th>
<th>姓名</th>
<th>分数</th>
<th>地址</th>
<th>操作</th>
</tr>
</thead>
<tbody v-show="studentList.length>0">
<tr v-for="(item,index) in studentList" :key="index" :class="[index%2==0?'red':'blue']">
<td><input type="checkbox" :checked="item.isChecked" @click="nowIsChecked(item.id)"></td>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td><span :class="[item.score<60?'changeRed':'']">{{item.score}}</span></td>
<td>{{item.address}}</td>
<td>
<a class="btn btn-default btn-sm" data-toggle="modal" @click="getStuId(item.id)"
data-target="#updateModal">修改</a>
<a class="btn btn-default btn-sm" href="javascript:void(0);"
@click="delStudent(item.id)">删除</a>
</td>
</tr>
</tbody>
<tbody v-show="!studentList.length>0">
<tr>
<td colspan="9" align="center">
暂无数据
</td>
</tr>
</tbody>
<tfoot>
<tr v-show="studentList.length>0">
<td colspan="9" align="center">
<!-- <span style="margin-right: 70px;">总分数:{{allScore}}</span> -->
<span style="margin-right: 70px;">总分数:{{sum}}</span>
<span>平局分:{{avg}}</span>
<!-- <span>平局分:{{avgScore}}</span> -->
</td>
</tr>
<tr>
<td colspan="9" align="center">
<a class="btn btn-primary" data-toggle="modal" @click="delAll()">批量删除</a>
<a class="btn btn-primary" data-toggle="modal" data-target="#addModal"
@click="clearData">添加学生</a>
</td>
</tr </tfoot>
</table>
</div>
<div class="col-lg-3"></div>
</div>
<!-- 新增 -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title" id="addModalLabel">新增</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>姓名：</label>
<input type="text" class="form-control" v-model="student.name" name="name"
placeholder="请输入姓名">
</div>
<div class="form-group">
<label>分数：</label>
<input type="text" class="form-control" v-model="student.score" name="score"
placeholder="请输入分数">
</div>
<div class="form-group">
<label>地址：</label>
<input type="text" class="form-control" v-model="student.address" name="address"
placeholder="请输入地址">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" @click="addStudent()">新增</button>
</div>
</div>
</div>
</div>
<!-- 修改 -->
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title" id="updateModalLabel">修改</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>学号：</label>
<input type="text" class="form-control" v-model="uStudent.id" name="id" disabled>
</div>
<div class="form-group">
<label>姓名：</label>
<input type="text" class="form-control" v-model="uStudent.name" name="name"
placeholder="请输入姓名">
</div>
<div class="form-group">
<label>分数：</label>
<input type="text" class="form-control" v-model="uStudent.score" name="score"
placeholder="请输入分数">
</div>
<div class="form-group">
<label>地址：</label>
<input type="text" class="form-control" v-model="uStudent.address" name="address"
placeholder="请输入地址">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" @click="updateStudent">修改</button>
</div>
</div>
</div>
</div>
</div>
<script>
let app = new Vue({
el: "#app",
data: {
allIsChecked: false,
IdNum: 0,
isShowAdd: false,
student: {
name: '',
score: null,
address: '',
id: null,
isChecked: false
},
uStudent: {},
avgScore: 0,
allScore: 0,
studentList: [
{ id: 1, name: "张三", score: 100, address: "北京顺义", isChecked: true },
{ id: 2, name: "李四", score: 90, address: "北京顺义", isChecked: false },
{ id: 3, name: "王五", score: 80, address: "北京顺义", isChecked: true },
{ id: 4, name: "赵六", score: 70, address: "北京顺义", isChecked: false },
{ id: 5, name: "孙七", score: 60, address: "北京顺义", isChecked: true },
{ id: 6, name: "花八", score: 50, address: "北京顺义", isChecked: false }
]
},
created() {
this.updateScore()
if (this.studentList.length > 0) {
this.IdNum = this.studentList[this.studentList.length - 1].id + 1
} else {
this.IdNum = 1;
}
},
computed: {
sum() {
let sum = 0;
for (let i = 0; i < this.studentList.length; i++) {
sum += Number(this.studentList[i].score);
}
return sum;
},
avg() {
return Math.floor(this.sum / this.studentList.length);
},
selectAll: {
get() {
for (let i = 0; i < this.studentList.length; i++) {
if (!this.studentList[i].isChecked) {
return false;
}
}
return true;
// let count = 0;
// for (let i = 0; i < this.studentList.length; i++) {
// if (this.studentList[i].isChecked == true) {
// count++;
// if (count == this.studentList.length) {
// return true;
// } else {
// continue;
// }
// }
// }
// return false;
},
set(val) {
console.log(val);
for (let i = 0; i < this.studentList.length; i++) {
if (val) {
this.studentList[i].isChecked = true
} else {
this.studentList[i].isChecked = false
}
}
}
}
},
methods: {
checkedAll() {
this.allIsChecked = !this.allIsChecked;
for (let i = 0; i < this.studentList.length; i++) {
if (this.allIsChecked) {
this.studentList[i].isChecked = true
} else {
this.studentList[i].isChecked = false
}
}
},
nowIsChecked(id) {
let i = this.findStudentById(id)
this.studentList[i].isChecked = !this.studentList[i].isChecked
},
addStudent() {
const newStu = {
...this.student,
id: this.IdNum
}
this.studentList.push(newStu);
this.IdNum++;
this.updateScore();
$("#addModal").modal('hide');
},
clearData() {
this.student.name = "";
this.student.score = null;
this.student.address = "";
},
getStuId(id) {
let i = this.findStudentById(id);
this.uStudent = this.studentList[i];
},
updateStudent() {
const nUstu = {
id: this.uStudent.id,
name: this.uStudent.name,
score: this.uStudent.score,
address: this.uStudent.address,
isChecked: this.uStudent.isChecked
}
let i = this.findStudentById(nUstu.id);
this.studentList[i] = nUstu;
this.updateScore();
$("#updateModal").modal('hide');
},
findStudentById(id) {
for (let i = 0; i < this.studentList.length; i++) {
if (this.studentList[i].id === id) {
return i;
}
}
},
updateScore() {
let sum = 0;
for (let i = 0; i < this.studentList.length; i++) {
sum += Number(this.studentList[i].score)
}
this.allScore = sum;
this.avgScore = String(Math.floor(this.allScore / this.studentList.length));
if (this.avgScore === "NaN") {
this.avgScore = 0
}
},
delStudent(id) {
let i = this.findStudentById(id);
this.studentList.splice(i, 1)
this.updateScore()
},
delAll() {
let delStu = [];
for (let i = 0; i < this.studentList.length; i++) {
if (this.studentList[i].isChecked) {
delStu.push(this.studentList[i])
}
}
for (let i = 0; i < delStu.length; i++) {
for (let j = this.studentList.length - 1; i >= 0; j--) {
if (delStu[i].id == this.studentList[j].id) {
this.studentList.splice(j, 1)
break;
}
}
}
if (this.studentList.length == 0) {
this.IdNum = 1;
}
this.allIsChecked = false
this.updateScore()
}
}
})
</script>
</body>
</html>
扫一扫
1768
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
