Home Esplora Aiuto
Accedi
lovecoding
/
VIP26
9
0
Forka 0
File Problemi 0 Pull Requests 0 Wiki
Sfoglia il codice sorgente

day27

e 1 anno fa
parent
d5d1372a98
commit
a7ec2b3251
4 ha cambiato i file con 177 aggiunte e 0 eliminazioni
Visualizzazione separata Mostra Diff Stats
  1. 60 0
      day27/1.列表渲染.html
  2. 61 0
      day27/2.列表过滤.html
  3. 56 0
      day27/3.列表过滤.html
  4. 0 0
      day27/vue.js

+ 60 - 0
day27/1.列表渲染.html
Vedi File 

@@ -0,0 +1,60 @@
 
+<!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">
 
+        <!-- 
+            格式：
 
+            v-for="(item,index) in/of data" :key="index"
 
+            key：给元素唯一的标识
 
+            一般渲染：数组 对象 字符串（很少） 次数（极少）
 
+         -->
 
+         <!-- 渲染数组 -->
 
+         <div v-for="(item,ind) of person" :key="ind">
 
+            名字：{{item.name}}
 
+            年龄：{{item.age}}
 
+            下标：{{ind}}
 
+         </div>
 
+         <!--渲染对象  -->
 
+         <div v-for="(item,index) of obj" :key="index">
 
+            {{item}}
 
+         </div>
 
+         <!-- 渲染字符串 -->
 
+         <div v-for="(item,index) of str" :key="index">
 
+            {{item}}
 
+         </div>
 
+         <!-- 渲染次数 -->
 
+         <div v-for="(item,index) of 6" :key="index">
 
+            {{item}}
 
+         </div>
 
+    </div>
 
+    <script src="./vue.js"></script>
 
+    <script>
 
+        var app = new Vue({
 
+            el:"#app",
 
+            data:{
 
+                person:[
 
+                    {
 
+                        name:"LiLi",
 
+                        age: 10
 
+                    },
 
+                    {
 
+                        name: "Jack",
 
+                        age: 30
 
+                    }
 
+                ],
 
+                obj:{
 
+                    isColor: 'red',
 
+                    name: 'HuaHua',
 
+                    age: 20,
 
+                },
 
+                str:"Hello"
 
+            }
 
+        })
 
+    </script>
 
+</body>
 
+</html>

+ 61 - 0
day27/2.列表过滤.html
Vedi File 

@@ -0,0 +1,61 @@
 
+<!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">
 
+        <input type="text" v-model="keyWords">
 
+        <ul>
 
+            <li v-for="(item,index) in newList" :key="index">
 
+                {{item.name}}--{{item.age}}--{{item.sex}}
 
+            </li>
 
+        </ul>
 
+    </div>
 
+    <script src="./vue.js"></script>
 
+    <script>
 
+        var app = new Vue({
 
+            data:{
 
+                keyWords:"",
 
+                person:[
 
+                    {
 
+                        name:"LiLi",
 
+                        age: 19,
 
+                        sex: '女'
 
+                    },
 
+                    {
 
+                        name:"Ming",
 
+                        age: 29,
 
+                        sex: '男'
 
+                    },
 
+                    {
 
+                        name:"Lucy",
 
+                        age: 99,
 
+                        sex: '女'
 
+                    },
 
+                    {
 
+                        name:"马冬梅",
 
+                        age: 98,
 
+                        sex: '女'
 
+                    },
 
+                ],
 
+                newList:[]
 
+            },
 
+            // 监听模式
 
+            watch: {
 
+                keyWords:{  
+                    immediate: true,
 
+                    deep: true,
 
+                    handler(val) {
 
+                        this.newList = this.person.filter((item) =>{
 
+                            return item.name.indexOf(val) !== -1;
 
+                        })
 
+                    }
 
+                }
 
+            }
 
+        }).$mount("#app")
 
+    </script>
 
+</body>
 
+</html>

+ 56 - 0
day27/3.列表过滤.html
Vedi File 

@@ -0,0 +1,56 @@
 
+<!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">
 
+        <input type="text" v-model="keyWords">
 
+        <ul>
 
+            <li v-for="(item,index) in newList" :key="index">
 
+                {{item.name}}--{{item.age}}--{{item.sex}}
 
+            </li>
 
+        </ul>
 
+    </div>
 
+    <script src="./vue.js"></script>
 
+    <script>
 
+        var app = new Vue({
 
+            data:{
 
+                keyWords:"",
 
+                person:[
 
+                    {
 
+                        name:"LiLi",
 
+                        age: 19,
 
+                        sex: '女'
 
+                    },
 
+                    {
 
+                        name:"Ming",
 
+                        age: 29,
 
+                        sex: '男'
 
+                    },
 
+                    {
 
+                        name:"Lucy",
 
+                        age: 99,
 
+                        sex: '女'
 
+                    },
 
+                    {
 
+                        name:"马冬梅",
 
+                        age: 98,
 
+                        sex: '女'
 
+                    },
 
+                ],
 
+            },
 
+            // 计算属性
 
+            computed:{
 
+                newList() {
 
+                    return this.person.filter((item) => {
 
+                        return item.name.indexOf(this.keyWords) !== -1;
 
+                    })
 
+                }
 
+            }
 
+        }).$mount("#app")
 
+    </script>
 
+</body>
 
+</html>

+ 0 - 0
day26/vue.js → day27/vue.js
Vedi File