<template> <div> <ul> <li v-for="(item, index) in stuList" :key="index"> <span>{{ item.name }}</span> —— <span>{{ item.score }}</span> </li> </ul> <div> <button @click="addStudent">增加一个</button> <button @click="removeStudent">删除一个</button> <button @click="clearAll">清空</button> <h4>合计:{{ totalScore }}</h4> </div> </div> </template> <script> import { ref, computed } from "vue"; export default { setup() { let stuList = ref([ { name: "张三", score: 80 }, { name: "李四", score: 78 }, { name: "王五", score: 66 }, { name: "周六", score: 95 }, ]); // 定义计算属性 let totalScore = computed({ get: () => { return stuList.value.reduce((acc, cur) => { return acc + cur.score; }, 0); }, set: (newValue) => { console.log("newValue", newValue); }, }); const getRandomIntInclusive = (min, max) => { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值,含最小值 }; const addStudent = () => { stuList.value.push({ name: "孙七", score: 85 }); }; const removeStudent = () => { const index = getRandomIntInclusive(0, stuList.length - 1); stuList.value.splice(index, 1); }; const clearAll = () => (stuList.value = []); return { stuList, totalScore, addStudent, removeStudent, clearAll, }; }, }; </script> <style scoped></style>
<template> <div> <ul> <li v-for="(item, index) in stuList" :key="index"> <span>{{ item.name }}</span> —— <span>{{ item.score }}</span> </li> </ul> <div> <button @click="addStudent">增加一个</button> <button @click="removeStudent">删除一个</button> <button @click="clearAll">清空</button> <h4>合计:{{ totalScore }}</h4> </div> </div> </template> <script> import { ref, computed } from "vue"; export default { setup() { let stuList = ref([ { name: "张三", score: 80 }, { name: "李四", score: 78 }, { name: "王五", score: 66 }, { name: "周六", score: 95 }, ]); // 定义计算属性 let totalScore = computed({ get: () => { return stuList.value.reduce((acc, cur) => { return acc + cur.score; }, 0); }, set: (newValue) => { console.log("newValue", newValue); }, }); const getRandomIntInclusive = (min, max) => { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值,含最小值 }; const addStudent = () => { stuList.value.push({ name: "孙七", score: 85 }); }; const removeStudent = () => { const index = getRandomIntInclusive(0, stuList.length - 1); stuList.value.splice(index, 1); }; const clearAll = () => (stuList.value = []); return { stuList, totalScore, addStudent, removeStudent, clearAll, }; }, }; </script> <style scoped></style>