watch
默认监听
watch监听默认的是，值类型监听，只会监听数据值的变化，
当引用类型里面的任何一个值发生变化的时候，那么不会触发监听事件
// 侦听器
watch: {
// 监听number属性
// 值类型属性监听
// number: function (newValue,oldValue){
/*
形参： newValue
是数据改变后的值，
形参: oldValue
是数据改变前的值
*/
// console.log('number数据发生了变化');
// console.log(newValue,oldValue);
// }
"obj.number": function (newValue,oldValue){
console.log(newValue,oldValue);
}
}
深度监听 handler
handler当数据发生变化的时候，触发此函数
// 虽然开启了深度监听，能够监听到对象里面的值得变化
// 但是没有办法知道具体是哪一个值发生了变化
//obj监听对象
obj: {
handler: function (newValue){
console.log(newValue);
// handler 当数据发生变化的时候，触发此函数
// console.log(123);
// 虽然开启了深度监听，能够监听到对象里面的值得变化
// 但是没有办法知道具体是哪一个值发生了变化
},
// 开启深度监听 默认为false
deep: true
}
computed计算当需求的处理程度，过于复杂时，计算属性无非是我们更好的选择
计算属性 会随着data数据的更新来更新计算属性的值
获取data的数据 仍然以this开头
computed: {
// total: function
// 当计算属性内写getter或者setter时 具体用法是
/*
属性: {
// getter
get: function (){
// 这里是页面最终显示的数据 所有的数据处理在这里执行
// 执行完成之后 仍然需要返回出去
return ‘值’
},
// setter
set: funciton (value){
// 在计算属性进行修改的时候，会先触发setter属性，
// 可以在这里进行数据的筛选等操作
// set没有返回值
// value就是操作的时候 赋予的值
}
}
*/
total: {
get: function (){
var count = 0;
this.list.forEach(item => {
count += item})
return count
},
set: function (value){
for (const key in value) {
value[key] = Number(value[key])
}
this.list = value;
}
}
效果图
<!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>
<script src="../js/vue.js"></script>
<style>
input{
width: 50px;
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<table border="1" rules="all">
<thead>
<tr>
<th><input type="checkbox" v-model="ckAll" @click="ckA()">全选</th>
<th>id 书名</th>
<th>日期</th>
<th>价格</th>
<th>数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in list" :key="item.id">
<!-- item.checked 绑定list数据的checked值 -->
<th><input type="checkbox" v-model="item.checked"></th>
<th> {
{item.id}}-{
{item.name}} </th>
<th> {
{item.time}} </th>
<th> {
{item.price}} </th>
<th>
<!--数量为1 的时候禁用按钮 -->
<button @click="item.num==1?!ckAll:!item.num--" >-</button>
<input type="text" v-model="item.num">
<button @click="item.num++">+</button>
</th>
<th><button @click="del(item.id)">删除</button></th>
</tr>
</tbody>
</table>
<h1>总金额：{
{total.toFixed(2)}}</h1>
</div>
</body>
<script>
new Vue({
el:"#app",
data() {
return {
// 总开关全选 绑定的值
ckAll:false,
list:[
{
id:1,
name:"小红书",
time:"2023/2/11",
price:100,
num:2,
checked:false
},
{
id:2,
name:"小蓝书",
time:"2023/2/11",
price:100,
num:2,
checked:false
},
{
id:3,
name:"小绿书",
time:"2023/2/11",
price:100,
num:2,
checked:false
},
{
id:4,
name:"小白书",
time:"2023/2/11",
price:100,
num:2,
checked:false
},
{
id:5,
name:"小黄书",
time:"2023/2/11",
price:666,
num:2,
checked:false
}
]
}
},
methods: {
del(id){
if(confirm("您确定delete我吗?")){
// filter 过滤id
// item.id!=id 返回新的list数据的条件
// 点击的id 不等于数组里的id 就完成了删除
this.list=this.list.filter(item=> item.id!=id)
}
},
// 总开关全选控制 下面的每一个商品选项
ckA() {
this.list.forEach(item => item.checked = !this.ckAll);
}
},
computed:{
// 总金额
// reduce 累计相加
total(){
return this.list.reduce((sum,item)=>{
if(item.checked){
return sum+=Number(item.price)*Number(item.num)
}
return sum
},0)
}
},
watch: {
// 商品反全选
list: {
handler: function () {
// every 遍历的每个item 其中一个为false 则返回false
this.ckAll = this.list.every((item) => {
return item.checked
})
},
deep: true
}
}
})
</script>
</html>