v-if、v-else、v-elseif v-show v-for

1. 单独使用v-if，变量为布尔值，为true才渲染Dom

2. v-show的变量也是布尔值，为true才显示内容，类似css的display

3. v-if、v-else、v-else-if联合使用相当于if、elseif、else，但是在条件比较多的时候建议使用计算属性。当三者或者两者一起使用的时候，必须有v-if，并且中间不能被其他标签同级隔断。

 v-if、v-else、v-elseif 和v-show

	<div id="app">
			<h2 v-if = "flag">谁说站在光里的才算英雄</h2>
			<h2 v-show = "flag">谁说站在光里的才算英雄</h2>
			<p v-if='age<18'>小于18岁的未成年</p>
			<p v-else-if='age<60'>小于60大于18岁的青壮年</p>
			<p v-else>老年人</p>
		</div>
		
		<script>
			
			const app = new Vue({
				el: '#app',
				data(){
					return {
						flag: false,
						age: 90
					}
				}
			})
		</script>

🎇v-if和v-show的区别

        v-if 在首次渲染的时候，如果条件为假，什么也不操作，页面当作没有这些元素。当条件为真的时候，开始局部编译，动态的向DOM元素里面添加元素。当条件从真变为假的时候，开始局部编译，卸载这些元素，也就是删除。

        ​ v-show 不管条件是真还是假，第一次渲染的时候都会编译出来，也就是标签都会添加到DOM中。之后切换的时候，通过display: none;样式来显示隐藏元素。可以说只是改变css的样式，几乎不会影响什么性能。

v-if的小练习

        这里有一个小区别，就是input里面加不加key的区别，如果不加key属性的话，在用户账号的输入框里面输入内容，当点击切换邮箱账号时，input输入框里面内容没有消失。加了key会避免这种情况。具体与key原理和虚拟DOM与真实DOM有关。

        <div id="app">
			<span v-if='flag'>
				<label for="username">用户账号</label>
				<input type="text" id="username" placeholder="请输入用户名" key='username'>
			</span>
			<span v-else>
				<label for="email">用户邮箱</label>
				<input type="text" name="" id="email" placeholder="请输入邮箱" key='email'>
			</span><br>
			<button @click='flag = !flag'>更改登录方式</button>
		</div>
		<script>
			const vm = new Vue({
				el: '#app',
				data(){
					return{
						flag: true
					}
				}
			})
		</script>

v-for

        遍历数组和对象

        <div id="app">
			<p v-for='(item,index) in arr'>{{item}}-{{index}}</p>
			<p v-for='(item,index) of arr'>{{item}}-{{index}}</p>
			<p v-for='(i,key) of obj'>{{key}}--{{i}}</p>
			<p v-for='(i,k,index) of obj'>{{k}}--{{i}}--{{index}}</p>
		</div>
		<script>
			new Vue({
				el: '#app',
				data(){
					return{
						arr: ['a','b','c','d'],
						obj:{
							name: 'tom',
							age: 17,
							sex: 'boy'
						}
					}
				}
			})
		</script>

        添加key属性的小案例，主要是用来演示。具体关于key原理可以参考这个视频key原理，（尚硅谷的老师的讲解，感觉很不错）

		<div id="app">
			<p v-for="(item,index) in list" :key="item.id">{{item.name}}--{{item.age}}
			<input type="text" />
			</p>
			<button type="button" @click="add">添加</button>
		</div>
		<script>
			const vm = new Vue({
				el: '#app',
				data() {
					return {
						list:[{
							id:01,
							name:'张三',
							age:20
						},
						{
							id:02,
							name:'李四',
							age:30
						},
						{
							id:03,
							name:'王五',
							age:40
						}
						]
					}
				},
				methods:{
					add(){
						this.list.unshift({
							id:04,
							name:'赵六',
							age:50
						})
					}
				}

			})
		</script>

数组的响应式方法

        意思是通过响应式命令（Vue）更改页面的值

        这里主要是介绍在Vue2中不能用this.arr[0] = 2这样的方法更改实例的值，可以用this.arr.splice(0,1,'f')更改，0是指索引为0,1是指从索引为0开始的第一个值（即索引为0的值，如果是1改成2，就是指索引为0和索引为1的值），‘f’是更改的值。

        <div id="app">
		    <!-- 数组的响应式方法 -->
		    <ul>
		      <li v-for="item in letters">{{item}}</li>
		    </ul>
		    <button @click="btn1">push</button><br>
		    <button @click="btn2">通过索引值修改数组</button>
		  </div>
		  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
		  <script>
		    const app = new Vue({
		      el:"#app",
		      data:{
		        letters:['a','b','c','d','e']
		      },
		      methods: {
		        btn1(){
		          //1.push
		          this.letters.splice(0,1,'f')
		          //2.pop()删除最后一个元素
		          //this.letters.pop()
		          //3.shift()删除第一个
		          //this.letters.shift()
		          //4.unshift()添加在最前面,可以添加多个
		          //this.letters.unshift('aaa','bbb','ccc')
		          //5.splice():删除元素/插入元素/替换元素
		          //splice(1,1)在索引为1的地方删除一个元素,第二个元素不传，直接删除后面所有元素
		          //splice(index,0,'aaa')再索引index后面删除0个元素，加上'aaa',
		          //splice(1,1,'aaa')替换索引为1的后一个元素为'aaa'
		          // this.letters.splice(2,0,'aaa')
		          //6.sort()排序可以传入一个函数
		          //this.letters.sort()
		          //7.reverse()反转
		          // this.letters.reverse()
		
		        },
		        btn2(){
		          // this.letters[0]='f'
                    //直接更改数组的方式
				  this.letters=['a','b','dd','d','e']
		        }
		      }
		    })