From 4c065b033b7779f34c52e972232fac3b04971e5d Mon Sep 17 00:00:00 2001
From: yb <1728066681@qq.com>
Date: Wed, 2 Jun 2021 17:42:28 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9D=A1=E4=BB=B6=E6=B8=B2=E6=9F=93/=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E6=B8=B2=E6=9F=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Vue - 2021.06.02.md"                      | 259 ++++++++++++++++++
 1 file changed, 259 insertions(+)
 create mode 100644 "\346\242\201\350\211\272\347\274\244/Vue - 2021.06.02.md"

diff --git "a/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.02.md" "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.02.md"
new file mode 100644
index 0000000..3b2bba3
--- /dev/null
+++ "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.02.md"	
@@ -0,0 +1,259 @@
+## Vue.js 第五节课 (条件渲染)
+
+### 条件渲染
+
+1. v-if
+ 
++ v-if指令就是插入节点或删除节点
+
++ v-if指令可以和v-esle连写
+```
+   <div id="app">
+        <template v-if="models">
+            <h1>迷之微笑</h1>
+            <p>good nice</p>
+            <p>土笨笨</p>
+        </template>
+
+        <p v-if="models">梗</p>
+        <p v-else>这是一个梗</p>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+    <script>
+        let app = new Vue({
+            el:"#app",
+            data:{
+                models:true
+            }
+        })
+    </script>
+```
+```
+    结果：models值为true全部显示 ok值为false不显示
+```
+```
+    结果：models值为true显示 梗 值为false显示 这是一个梗
+```
+
+2. v-show
+
++ 注意，v-show 不支持 //template// 元素，也不支持 v-else。
+
++ 当模板属性为true的时候控制台显示为display：block。属性值为false的时候控制台显示display: none
+
+```
+<div id="app">
+        <ul>
+            <li v-for="item in models" v-if="item.lisa">{{item.red}}</li>
+        </ul>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+    <script>
+        let app = new Vue({
+            el: "#app",
+            data: {
+                models: [
+                    {red:"good nice",lisa:true},
+                    {red:"土笨笨",lisa:false},
+                    {red:"这是一个梗",lisa:true},
+                    {red:"这是一个土笨笨",lisa:true},
+                    {red:"嗯哼",lisa:true},
+                ]
+            }
+        })
+    </script>
+```
++ 有条件地跳过循环的执行，那么可以将 v-if 置于外层元素+
+
+```
+    <div id="app">
+        <ul v-if="lisa">
+            <li v-for="item in models">{{item.red}}</li>
+        </ul>
+    </div>
+
+    <script>
+        let app = new Vue({
+            el: "#app",
+            data: {
+                lisa:false,
+                models: [
+                    {red:"good nice",lisa:true},
+                ]
+            }
+        })
+    </script>
+
+    lisa为false时全部不显示，Lisa为true时全部显示
+```
+
+  ### 注意：v-if 与 v-for 一起使用
+ 
+ 1. 永远不要把 v-if 和 v-for 同时用在同一个元素上。
+
+ 2. 当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级
+
+ ### 列表渲染
+
+ + v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
+
+ + v-for 支持一个可选的第二个参数
+ ```
+    <div id="app">
+       <ul id="example-2">
+            <li v-for="(item, index) in items">
+                {{ parentMessage }} - {{ index }} - {{ item.message }}
+            </li>
+        </ul>
+    </div>
+
+    var example2 = new Vue({
+  el: '#example-2',
+  data: {
+    parentMessage: 'Parent',
+    items: [
+      { message: 'Foo' },
+      { message: 'Bar' }
+    ]
+  }
+})
+ ```
+
+### 维护状态
+
++ 使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略
+
+### 在组件上使用 v-for
+
++ 任何数据都不会被自动传递到组件里，因为组件有自己独立的作用域。
+
++ 在 <ul> 元素内只有 <li> 元素会被看作有效内容
+
+1. 方法一
+```
+    <div id="app">
+        <label for="">hh</label>
+
+        <input type="text" v-model="newItem"><input type="button" value="添加" @click="addToList">
+        <ul>
+            <li v-for="(item,index) in lists">{{item.todoItem}}<input type="button" @click="remove(index)" value="移除"></li>
+        </ul>
+    </div>
+
+    <script>
+        let app = new Vue({
+            el: "#app",
+            data: {
+                newItem:'',
+                lists:[
+                    {
+                        id:1,
+                        todoItem:'good'
+                    },
+                    {
+                        id:2,
+                        todoItem:'nice'
+                    },
+                    {
+                        id:3,
+                        todoItem:'土笨笨'
+                    },
+
+                ]
+            },
+            methods:{
+                addToList:function(){
+                    let obj = {
+                        id:this.lists.length+1,
+                        todoItem:this.newItem
+                    }
+                    this.lists.push(obj)
+                    this.newItem=""
+                },
+                remove:function(index){
+                    console.log(index);
+                    this.lists.splice(index,1)
+                }
+            }
+        })
+    </script>
+```
+
+2. 方法二
+```
+    <div id="todo-list-example">
+        <form v-on:submit.prevent="addNewTodo">
+          <label for="new-todo">嘎嘎嘎</label>
+          <input
+            v-model="newTodoText"
+            id="new-todo"
+            placeholder="写点什么吧！！！"
+          >
+          <button>添加</button>
+        </form>
+        <ul>
+        <!--用"is"绑定 <li> 元素和组件<todo-item>, 因为<ul>元素固定使用<li>元素，不能直接使用组件的自定义元素-->  
+          <li
+            is="todo-item"
+            v-for="(todo, index) in todos"
+            v-bind:key="todo.id"
+            v-bind:title="todo.title"
+            v-on:remove="todos.splice(index, 1)"
+          ></li>
+        </ul>
+      </div>
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+
+    <script>
+        Vue.component('todo-item', {
+            template: '\
+            <li>\
+            {{ title }}\
+            <button v-on:click="$emit(\'remove\')">移除</button>\
+            </li>\
+        ',
+            props: ['title']
+        })
+
+        let app = new Vue({
+            el: '#todo-list-example',
+            data: {
+                newTodoText: '',
+                
+                //创建prop value 来储存数据
+                todos: [
+                    {
+                        id: 1,
+                        title: '睡觉',
+                    },
+                    {
+                        id: 2,
+                        title: 'good nice',
+                    },
+                    {
+                        id: 3,
+                        title: '土笨笨'
+                    }
+                ],
+                nextTodoId: 4
+            },
+            methods: {
+                addNewTodo: function () {
+                    //用push 方法把新的 id 和 title 添加进 todo 列表
+	                //title: this.newTodoText 因为在上面的<input> 元素绑定了 v-model="newTodoText" 
+                    //双向绑定了输入框的value，所以触发这个函数时，title 会获取这个input 输入框的value 值
+
+                    this.todos.push({
+                        id: this.nextTodoId++,
+                        title: this.newTodoText
+                    })
+                    
+	                //提交新数据后，清空input 的value值（因为上面的<input> 元素双向绑定了 v-model="newTodoText"）
+                    this.newTodoText = ''
+                }
+            }
+        })
+    </script>
+```
\ No newline at end of file
-- 
Gitee