vue-计算属性
一.定义
概念：基于现有的数据，计算出来的新属性。依赖的数据变化，自动重新计算。
语法：
- 声明需要放在computed的配置项中，一个计算属性对于一个函数。
- 使用起来和普通属性一样使用{{计算属性名}}
- 计算属性->可以将一段求职的代码进行封装
案例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table {border: 1px solid #000;text-align: center;width: 240px;}th,td {border: 1px solid #000;}h3 {position: relative;}</style>
</head>
<body><div id="app"><h3>礼物清单</h3><table><tr><th>名字</th><th>数量</th></tr><tr v-for="(item, index) in list" :key="item.id"><td>{{ item.name }}</td><td>{{ item.num }}个</td></tr></table><!-- 目标：统计求和，求得礼物总数 --><p>礼物总数：{{totalCount}}个</p>
</div><script src="js/vue.js"></script>
<script>const app = new Vue({el: '#app',data:{// 现有的数据list: [{ id: 1, name: '篮球', num: 1 },{ id: 2, name: '玩具', num: 2 },{ id: 3, name: '铅笔', num: 5 },]},methods:{},computed:{totalCount(){//计算属性内部函数可以直接通过this旁问道app实例let total=this.list.reduce((sum, item) => sum + item.num, 0)return total}}})
</script>
</body>
</html>
二.computde VS methods
computde计算属性：
作用：封装了一段对于数据的处理，求得一个结果。
语法：
- 卸载2computde配置项中
- 作为属性，直接使用——>this.计算属性
缓存特性：（提升性能）
计算属性会对计算出来的结果缓存，再次使用直接读取缓存依赖项变化了，会自动重新计算 →并再次缓存
methods方法：
作用：给实例提供一个方法，调用以处理业务逻辑
语法：
- 写在methods配置项中
- 作为方法，需要调用 ——> this.方法名（） {{方法名（）}} @事件名 = "方法名"
三.计算属性的完整写法
计算属性的默认写法是简写，智能读取访问，不能修改
如果要修改——>需要计算属性的完整写法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app">姓：<input type="text" v-model="firstName"><br>名：<input type="text" v-model="lastName"><br><p>姓名：{{fullName}}</p><button @click="chengname">修改姓名</button>
</div>
<script src="./js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {firstName:'',
lastName: ''},computed: {fullName:{//当fullName计算属性，贝获取求值时，执行get（有缓存，优先读缓存）get(){return this.firstName + this.lastName},set(value){//当fullName被修改时，执行set 方法this.firstName = value.slice(0,1)this.lastName = value.slice(1)}}},methods: {chengname(){this.fullName = '张三'}}})
</script>
</body>
</html>
四.综合案例-成绩案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link rel="stylesheet" href="./css/index2.css" /><title>Document</title>
</head>
<body>
<div id="app" class="score-case"><div class="table"><table><thead><tr><th>编号</th><th>科目</th><th>成绩</th><th>操作</th></tr></thead><!--渲染--><tbody v-if="list.length > 0"><tr v-for="(item,index) in list" :key="item.id"><td>{{index + 1}}</td><td>{{item.subject}}</td><td :class="{red:item.score < 60}">{{item.score}}</td><!--删除--><td><a @click.prevent="del(item.id)" href="#">删除</a></td></tr></tbody><tbody v-else><tr><td colspan="5"><span class="none">暂无数据</span></td></tr></tbody><tfoot><tr><td colspan="5"><span>总分：{{totalScore}}</span><span style="margin-left: 50px">平均分：{{averScore}}</span></td></tr></tfoot></table></div><!--添加--><div class="form"><div class="form-item"><div class="label" >科目：</div><div class="input"><inputtype="text"placeholder="请输入科目"v-model.trim="subject"/></div></div><div class="form-item"><div class="label">分数：</div><div class="input"><inputtype="text"placeholder="请输入分数"v-model.number="score"/></div></div><div class="form-item"><div class="label"></div><div class="input"><button class="submit" @click="add()">添加</button></div></div></div>
</div>
<script src="./js/vue.js"></script><script>const app = new Vue({el: '#app',data: {list: [{ id: 1, subject: '数学', score: 20 },{ id: 2, subject: '语文', score: 60 },{ id: 3, subject: '英语', score: 78},],subject: '',score: ''},methods:{del(id){this.list = this.list.filter(item => item.id !== id)},add(){if (!this.subject) {alert('请输入科目')return}if (typeof this.score !== 'number' ) {alert('请输入正确分数')return}this.list.unshift({id: +new Date(),subject: this.subject,score: this.score})/*清空*/this.subject = ''this.score = ''}},computed:{totalScore(){return this.list.reduce((sum,item) => sum + item.score,0)},averScore(){if(this.list.length === 0) return 0return (this.totalScore / this.list.length).toFixed(2)}}})
</script>
</body>
</html>