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

vue

e 11 mesi fa
parent
73bbeb64ab
commit
a993b69ffc
2 ha cambiato i file con 106 aggiunte e 0 eliminazioni
Visualizzazione unificata Mostra Diff Stats
  1. 69 0
      vue/vue初阶/10.循环渲染.html
  2. 37 0
      vue/vue初阶/9.条件渲染.html

+ 69 - 0
vue/vue初阶/10.循环渲染.html
Vedi File 

@@ -0,0 +1,69 @@
 
+<!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>
 
+    <!-- 
+        v-if 与 v-for 哪个优先级高呢？
 
+        1.Vue2中 v-for优先级高
 
+        2.Vue3中 v-if优先级高
 
+        循环渲染
 
+        v-for:
 
+            格式：
 
+                v-for=(item<每一项>,index(每一项的下标) in 渲染的数据) :key="index"
 
+            为什么要绑定key？
 
+                为了确保数据的唯一性
 
+     -->
 
+     <div id="app">
 
+        <!-- 循环数组 -->
 
+        <ul v-for="(item,index) in list" :key="index">
 
+           <li>{{item.id}}--{{item.name}}--{{item.age}}</li> 
+        </ul>
 
+        <!-- 循环字符串 -->
 
+        <ul v-for="(item,index) in str" :key="index">
 
+            <li>{{item}}</li>
 
+        </ul>
 
+        <!-- 循环对象 -->
 
+        <div v-for="(item,index) in obj" :key="index">
 
+            {{item}}
 
+        </div>
 
+        <!-- 循环数字 -->
 
+        <div v-for="(item,index) in num" :key="index">
 
+            {{item}}
 
+        </div>
 
+     </div>
 
+     <script src="./vue.js"></script>
 
+     <script>
 
+        var app = new Vue({
 
+            data:{
 
+                list:[
 
+                    {
 
+                        id:1,
 
+                        name:"Lucy",
 
+                        age: 10
 
+                    },
 
+                    {
 
+                        id:2,
 
+                        name:"John",
 
+                        age: 20
 
+                    },
 
+                    {
 
+                        id:3,
 
+                        name:"Jack",
 
+                        age: 100
 
+                    },
 
+                ],
 
+                str: 'hello',
 
+                obj: {
 
+                    name: 'Lucy',
 
+                    age: 10
 
+                },
 
+                num: 20
 
+            }
 
+        }).$mount("#app");
 
+     </script>
 
+</body>
 
+</html>

+ 37 - 0
vue/vue初阶/9.条件渲染.html
Vedi File 

@@ -0,0 +1,37 @@
 
+<!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>
 
+     <!--
 
+        1.v-if v-else-if v-else
 
+        2.show
 
+        v-if与v-show区别
 
+        v-if 满足执行语句才会显示
 
+        v-show 只要为真就显示 频繁切换
 
+       -->
 
+    <div id="app">
 
+        <h1>成绩：{{score}}</h1>
 
+        <!-- <p v-if="score >= 90">优秀</p>
 
+        <p v-else-if="score >= 70">良好</p>
 
+        <p v-else-if="score >= 60">及格</p>
 
+        <p v-else>啊~</p> -->
 
+        
+        <p v-show="score >= 90">优秀</p>
 
+        <p v-show="score >= 70">良好</p>
 
+        <p v-show="score >= 60">及格</p>
 
+        <p v-show="score < 60">啊~</p>
 
+    </div>
 
+    <script src="./vue.js"></script>
 
+    <script>
 
+        var app = new Vue({
 
+            data:{
 
+                score: Math.round(Math.random() * 100 + 0)
 
+            }
 
+        }).$mount("#app");
 
+    </script>
 
+</body>
 
+</html>