vue中的分支语句。
1、v-if、v-else、v-else-if
（1）v-if
你看到我了当这个temp的值为true时，div的内容才会显示
（2）v-else
就是v-if的对立面
（3）v-else-if
就是在v-else里面再嵌套一个if。
例如：
<body> <div id="app"> <div v-if="temp">你看到我了div> //当temp为true时才显示 <div v-else-if="temp1">!!!!!!div> //当temp为false时，并且temp1为true时显示 <div v-else="temp">看到它了div> //当temp和temp1为false时为显示 <button type="button" @click="temp=!temp">点我button> div> body> <script> var vm = new Vue({ el:"#app", data:{ temp:false, temp1:false } }) script>
2、v-show
用法上和v-if是相同的v-show中的布尔值变量是true的时候就会显示内容，为false的时候就不会显示内容，但是v-show改变的是元素的样式，改变的是样式：display：none，而v-if是直接让元素消失或添加元素所以性能上，v-show更好。
3、template标签
在vue中经常会遇到这个标签，目前可以配合v-if可以实现被包含的多个元素的显示与消失，但是不能和v-show一起使用，因为template天生不可见，所以设置display：none是没有意义的所以不能和v-show一起使用
<template v-if ="temp"> <div> <div>xxxdiv> <p >xxp> div> template>
4、vue循环语句：v-for
（1）v-for是vue中的循环的关键字，需要通过数据源遍历，再通过差值表达式显示出数据，例如：
<body> <div id="app"> <ul> <li v-for="a in agrs">{{a}}li> ul> div> body> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12">script> <script> var vm = new Vue({ el:"#app", data:{ agrs:[1,2,3,4,5,6,7,8,9] } }) script>
（2）改进版（带着下标的）：
<body> <div id="app"> <ul> <li v-for="(a,i) in agrs" :key="i">{{i}}-----{{a}}li> ul> div> body> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12">script> <script> var vm = new Vue({ el:"#app", data:{ agrs:[1,2,3,4,5,6,7,8,9] } }) script>
此时的i是从0开始的，每次循环的下标值就是元素的位置-1
3、遍历一个对象：
<ul> <li v-for="(v,k,i) in people">{{i}}----------{{k}}----{{v}}li> ul> <script> var vm = new Vue({ el:"#app", data:{ agrs:[1,2,3,4,5,6,7,8,9], people:{ name:"小明", age:"25", sex:"man" } } }) script>
4、遍历一个对象数组：
<ul> <li v-for="peo in people"> <span v-for="(v,k,i) in peo">{{v}}--{{k}}--{{i}}---span>--------------- li> ul> <script> var vm = new Vue({ el:"#app", data:[{ agrs:[1,2,3,4,5,6,7,8,9], people:{ name:"小明", age:"25", sex:"man" } },{ name:"小红", age:"28", sex:"woman" }] }) script>