vue3

20.vue3/project1/src/App.vue

@@ -3,8 +3,8 @@
     <h1>App</h1>
     <hr>
     <hr>
-    <Demo9></Demo9>
-    <hr>
+    <Demo11></Demo11>
+    <!-- <hr>
     <hr>
     <Demo8></Demo8>
     <hr>
@@ -27,20 +27,21 @@
     <Demo3></Demo3>
     <hr>
     <hr>
-    <Demo4></Demo4>
+    <Demo4></Demo4> -->
   </div>
 </template>
 
 <script setup>
-import Demo1 from './components/Demo1.vue'
-import Demo2 from './components/Demo2.vue'
-import Demo3 from './components/Demo3.vue'
-import Demo4 from './components/Demo4.vue'
-import Demo5 from './components/Demo5.vue'
-import Demo6 from './components/Demo6.vue'
-import Demo7 from './components/Demo7.vue'
-import Demo8 from './components/Demo8.vue'
-import Demo9 from './components/Demo9.vue'
+// import Demo1 from './components/Demo1.vue'
+// import Demo2 from './components/Demo2.vue'
+// import Demo3 from './components/Demo3.vue'
+// import Demo4 from './components/Demo4.vue'
+// import Demo5 from './components/Demo5.vue'
+// import Demo6 from './components/Demo6.vue'
+// import Demo7 from './components/Demo7.vue'
+// import Demo8 from './components/Demo8.vue'
+// import Demo9 from './components/Demo9.vue'
+import Demo11 from './components/Demo11.vue'
 </script>
 
 <style lang="scss" scoped>

20.vue3/project1/src/components/Demo10.vue

@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <h1>watch</h1>
+    <h2>我有{{ flower }}朵花</h2>
+    <button @click="changeFlower">减少</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref, watch} from "vue" 
+let flower = ref(10);
+function changeFlower() {
+    flower.value--;
+}
+watch(flower,(newValue,oldValue)=>{
+    console.log(newValue,oldValue)
+},{
+    deep: true,//深度监听
+    immediate: true//立即监听
+})
+</script>
+
+<style lang="scss" scoped>
+</style>

20.vue3/project1/src/components/Demo11.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <h1>watch</h1>
+    <h2>我有{{ flower.num }}朵{{flower.type}}花</h2>
+    <button @click="changeNum">减少数量</button>
+    <button @click="changeFlower">修改全部</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref, watch} from "vue" 
+let flower = ref({
+  type:"牡丹",
+  num: 10
+});
+function changeFlower() {
+    flower.value = {
+      type:'康乃馨',
+      num: 20
+    }
+}
+const changeNum = () => {
+  flower.value.num--;
+}
+watch(flower,(newValue,oldValue)=>{
+    console.log(newValue,oldValue)
+},{
+    deep: true,//深度监听
+    immediate: true//立即监听
+})
+</script>
+
+<style lang="scss" scoped>
+</style>

20.vue3/project1/src/components/Demo9.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="box">
+    <div class="search-bar">
+      <input placeholder="搜索学生姓名" v-model="keyWords" />
+      <span>分数区间：</span>
+      <input type="number" placeholder="最低分" v-model.number="minScore" />
+      -
+      <input type="number" placeholder="最高分" v-model.number="maxScore" />
+      <button @click="resetChoose">重置筛选</button>
+    </div>
+
+    <div class="btn-group">
+      <label> <input type="checkbox" v-model="isChecked"/> 全选 </label>
+      <button @click="reverseCkecked">反选</button>
+      <button @click="clearChecked">清空选中</button>
+      <button @click="changeListUp">分数升序</button>
+      <button @click="changeListDown">分数降序</button>
+    </div>
+
+    <ul>
+      <li v-for="stu in filterList" :key="stu.id">
+        <input type="checkbox" v-model="stu.checked"/>
+        姓名：{{ stu.name }} | 科目：{{ stu.subject }} | 分数：{{ stu.score }}
+      </li>
+    </ul>
+
+    <div class="stat">
+      <p>筛选后总人数：</p>
+      <p>已选人数:</p>
+      <p>已选学生平均分：</p>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed } from "vue";
+let keyWords = ref("");
+let minScore = ref(0);
+let maxScore = ref(100);
+const studentList = ref([
+  { id: 1, name: "张三", subject: "语文", score: 88, checked: false },
+  { id: 2, name: "李四", subject: "数学", score: 76, checked: false },
+  { id: 3, name: "王五", subject: "英语", score: 92, checked: false },
+  { id: 4, name: "赵六", subject: "语文", score: 59, checked: false },
+  { id: 5, name: "钱七", subject: "数学", score: 82, checked: false },
+  { id: 6, name: "孙八", subject: "英语", score: 70, checked: false },
+]);
+const filterList = computed(() => {
+    return studentList.value.filter(item => {
+        const name1 = item.name.includes(keyWords.value);
+        const score1 = item.score >= minScore.value && item.score <= maxScore.value;
+        return name1 && score1;
+    })
+})
+const isChecked = computed({
+    get() {
+        return studentList.value.every(item => item.checked) && studentList.value.length > 0;
+    },
+    set(val) {
+        studentList.value.forEach(item => item.checked = val);
+    }
+})
+
+const reverseCkecked = () => {
+    studentList.value.forEach(item => item.checked = !item.checked);
+}
+
+const resetChoose = () => {
+    keyWords.value = '';
+    minScore.value = 0;
+    maxScore.value = 100;
+}
+
+const clearChecked = () => {
+    studentList.value.forEach(item => item.checked = false);
+}
+
+const changeListUp = () => {
+    studentList.value.sort((a,b) => a.score - b.score);
+}
+const changeListDown = () => {
+    studentList.value.sort((a,b) => b.score - a.score);
+}
+</script>
+
+<style scoped>
+.box {
+  margin: 10px;
+}
+.search-bar,
+.btn-group {
+  margin: 8px 0;
+}
+input {
+  margin: 0 6px;
+  padding: 4px;
+}
+ul {
+  list-style: none;
+  padding: 0;
+}
+li {
+  margin: 6px 0;
+}
+button {
+  margin: 0 4px;
+  padding: 4px 8px;
+  cursor: pointer;
+}
+.stat {
+  margin-top: 12px;
+  color: #333;
+}
+</style>