Эхлэл Бүгдийг харах Тусламж
Нэвтрэх
lovecoding
/
web0715
10
0
Салаа 0
Файлууд Асуудлууд 0 Мэдлэгийн сан
Эх сурвалжийг харах

vue2

e 8 сар өмнө
parent
7728a4e45a
commit
8759f04766
2 өөрчлөгдсөн 140 нэмэгдсэн , 0 устгасан
Өөрчлөллтийг нэгтгэж харах Өөрчлөлтийн статистик харах
  1. 68 0
      vue/vue初阶/12.列表过滤.html
  2. 72 0
      vue/vue初阶/13.列表过滤.html

+ 68 - 0
vue/vue初阶/12.列表过滤.html
Файл харах 

@@ -0,0 +1,68 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <div id="app">
 
+        <h2>关键字搜索：<input type="text" v-model="keywords"></h2>
 
+        <ul>
 
+            <li v-for="(item,index) in newList" :key="index">
 
+                {{index+1}}-我叫{{item.name}}--今年{{item.age}}--是一个{{item.sex}}孩
 
+            </li>
 
+        </ul>
 
+    </div>
 
+    <script src="./vue.js"></script>
 
+    <script>
 
+        var app = new Vue({
 
+            el:"#app",
 
+            data:{
 
+                arr:[
 
+                    {
 
+                        name:"LiLi",
 
+                        age:10,
 
+                        sex:"女"
 
+                    },
 
+                    {
 
+                        name:"John",
 
+                        age:17,
 
+                        sex:"男"
 
+                    },
 
+                    {
 
+                        name:"Lucy",
 
+                        age:22,
 
+                        sex:"女"
 
+                    },
 
+                    {
 
+                        name:"Jack",
 
+                        age:20,
 
+                        sex:"男"
 
+                    },
 
+                    {
 
+                        name:"孙悟空",
 
+                        age:33,
 
+                        sex:"男"
 
+                    },
 
+                    {
 
+                        name:"猪八戒",
 
+                        age:30,
 
+                        sex:"男"
 
+                    }
 
+                ],
 
+                keywords:""
 
+            },
 
+            computed:{
 
+                newList(){
 
+                    // 整体数据中过滤出符合条件的数据
 
+                    return this.arr.filter((item)=>{
 
+                        console.log(item,'item')
 
+                        return item.name.indexOf(this.keywords) !== -1
 
+                    })
 
+                }
 
+            }
 
+        })
 
+    </script>
 
+</body>
 
+</html>

+ 72 - 0
vue/vue初阶/13.列表过滤.html
Файл харах 

@@ -0,0 +1,72 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <div id="app">
 
+        <h2>关键字搜索：<input type="text" v-model="keywords"></h2>
 
+        <ul>
 
+            <li v-for="(item,index) in newList" :key="index">
 
+                {{index+1}}-我叫{{item.name}}--今年{{item.age}}--是一个{{item.sex}}孩
 
+            </li>
 
+        </ul>
 
+    </div>
 
+    <script src="./vue.js"></script>
 
+    <script>
 
+        var app = new Vue({
 
+            el:"#app",
 
+            data:{
 
+                arr:[
 
+                    {
 
+                        name:"LiLi",
 
+                        age:10,
 
+                        sex:"女"
 
+                    },
 
+                    {
 
+                        name:"John",
 
+                        age:17,
 
+                        sex:"男"
 
+                    },
 
+                    {
 
+                        name:"Lucy",
 
+                        age:22,
 
+                        sex:"女"
 
+                    },
 
+                    {
 
+                        name:"Jack",
 
+                        age:20,
 
+                        sex:"男"
 
+                    },
 
+                    {
 
+                        name:"孙悟空",
 
+                        age:33,
 
+                        sex:"男"
 
+                    },
 
+                    {
 
+                        name:"猪八戒",
 
+                        age:30,
 
+                        sex:"男"
 
+                    }
 
+                ],
 
+                keywords:"",
 
+                newList:[]
 
+            },
 
+            watch:{
 
+                keywords:{
 
+                    immediate: true,
 
+                    deep: true,
 
+                    handler(value) {
 
+                        console.log(value,'value')
 
+                        this.newList = this.arr.filter(item => {
 
+                            return item.sex.indexOf(value) !== -1;
 
+                        })
 
+                    }
 
+                }
 
+            }
 
+        })
 
+    </script>
 
+</body>
 
+</html>