累计求和公式![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/2bb6d4214c4165b3fa6152f487e4b41c.png)
深度监听 缓存到本地
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/ba2df168355447cc2272276afc780a81.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/855f05a4357c0a13f8c3dac6b5365538.png)
导航高亮
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/91bf84d15f3ad15946acd688372d5c75.png)
- 循环铺设数组
- 给class绑定动态属性,判断结果为布尔值
- 绑定点击事件,接收对应索引,传给一个空值num
- 在动态class内判断index是否与num相等
- 显示对应高亮
小案例
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/fd7004195ac6d20415cbe47897702583.png)
<template>
<div id="app">
<div>
<span>姓名:</span>
<input type="text" v-model.trim="koko.name" />
</div>
<div>
<span>年龄:</span>
<input type="number" v-model.number="koko.age" />
</div>
<div>
<span>性别:</span>
<select v-model="koko.sex">
<option value="男">男</option>
<option value="女">女</option>
</select>
</div>
<div>
<button @click="btn">添加/修改</button>
</div>
<div>
<table
v-show="this.arr.length > 0"
border="1"
cellpadding="10"
cellspacing="0"
>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr v-for="(obj, index) in arr" :key="index">
<td>{{ index + 1 }}</td>
<td>{{ obj.name }}</td>
<td>{{ obj.age }}</td>
<td>{{ obj.sex }}</td>
<td>
<button @click="delel(index)">删除</button>
<button @click="Bj(obj, index)">编辑</button>
</td>
</tr>
</table>
</div>
</div>
</template>
<script>
export default {
data () {
return {
editIndex: -1,
koko: {
name: '',
age: 0,
sex: '',
},
arr: [
{
name: 'TonI',
age: 19,
sex: '男'
},
{
name: 'TangMu',
age: 21,
sex: '女'
}
]
}
},
methods: {
btn () {
if (this.editIndex === -1) {
this.arr.push({ ...this.koko })
} else {
this.$set(this.arr, this.editIndex, { ...this.koko })
}
},
Bj (i, index) {
this.koko = { ...i }
this.editIndex = index
},
delel (i) {
this.arr.splice(i, 1)
}
}
}
</script>