一.条件渲染

1.v-if

写法：

（1）v-if=“表达式”

（2）v-else-if=“表达式”

（3）v-else=“表达式”

适用于：切换频率较低的场景

特点：不展示DOM元素直接被移除

注意：v-if可以和：v-else-if\v-else一起用，但邀请结构不能被打断

2.v-show

写法：v-show=“表达式”

适用于：切换频率较高的场景

特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

3.备注：使用v-if时，元素可能无法获取到，而使用v-show一定可以获取到

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8"/>
		<title>初识vue</title>
		<script type="text/javascript" src="../js/vue.js">
			alert("这是我的第一行JS代码")
			document.write("看我出不出来")
		</script>
	</head>
	<body>
        <!-- 容器 -->
        <div id="root">
            <h2>{{n}}</h2>
            <button @click="n++">点我加1</button>
            <!-- 使用v-show做条件渲染 -->
            <!-- <h2 v-show="false">hello{{name}}</h2>
            <h2 v-show="1 ===1">hello{{name}}</h2> -->
            <!-- 使用v-if做条件渲染 -->
            <!-- <h2 v-if="false">hello{{name}}</h2>
            <h2 v-if="1 ===1">hello{{name}}</h2> -->
            <!-- v-else和v-else-if -->
            <!-- <div v-if="n===1">A</div>
            <div v-else-if="n===2">B</div>
            <div v-else-if="n===3">C</div>
            <div v-else>哈哈</div> -->
            <template v-if="n===1">
                <h2>你好</h2>
                <h2>哈哈</h2>
                <h2>嗯嗯</h2>
            </template>
        </div>
        
		<script type="text/javascript" >
        Vue.config.productionTip = false
        const vm = new Vue({
            el:'#root',
            data:{
                name:'atguigu',
                a:false,
                n:0
            },
        })
        console.log(vm)
       
        </script>
	</body>
</html>

二.列表渲染

v-for指令

1。用于展示列表数据

2.语法：v-for="(item,index) in xxx" :key="yyy"

3.可遍历：数组、对象、字符串（很少）、指定次数（很少）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8"/>
		<title>姓名案例</title>
		<script type="text/javascript" src="../js/vue.js">
		</script>
	</head>
	<body>
        <!-- 容器 -->
        <div id="root">
            <!-- 遍历数组（用的多） -->
            <ul>
                <!-- <li v-for="p in persons" :key="p.id">
                    {{p.name}}-{{p.age}}
                </li> -->
                <li v-for="(p,index) in persons" :key="index">
                    {{p.name}}-{{p.age}}
                </li>
            </ul>
            <!-- 遍历对象 -->
            <ul>
                <li v-for="(val,key) in car" :key="key">
                    {{key}}-{{val}}
                </li>
            </ul>
            <!-- 遍历字符串(用得少) -->
            <ul>
                <li v-for="(char,index) in str" :key="index">
                    {{char}}-{{index}}
                </li>
            </ul>
            <!-- 遍历指定次数(用得少) -->
            <ul>
                <li v-for="(number,index) in 5" :key="index">
                    {{index}}-{{number}}
                </li>
            </ul>
        </div>
        
		<script type="text/javascript" >
        Vue.config.productionTip = false
        new Vue({
            el:'#root',
            data:{
                persons:[
                {id:'001',name:'张三',age:'18'},
                {id:'002',name:'李四',age:'19'},
                {id:'003',name:'王五',age:'20'}
                ],
                car:{
                    name:"aodiA8",
                    price:"70wan",
                    color:"black"
                },
                str:'hello'
            }
        })
        </script>
	</body>
</html>

in也可以改为of

最后写上小括号

三.Key原理

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8"/>
		<title>姓名案例</title>
		<script type="text/javascript" src="../js/vue.js">
		</script>
	</head>
	<body>
        <!-- 容器 -->
        <div id="root">
            <!-- 遍历数组（用的多） -->
            <button @click="add">增加老刘</button>
            <ul>
                <li v-for="(p,index) in persons" :key="index">
                    {{p.name}}-{{p.age}}
                    <input type="text">
                </li>
            </ul>
           
        </div>
        
		<script type="text/javascript" >
        Vue.config.productionTip = false
        new Vue({
            el:'#root',
            data:{
                persons:[
                {id:'001',name:'张三',age:'18'},
                {id:'002',name:'李四',age:'19'},
                {id:'003',name:'王五',age:'20'}
                ],
                car:{
                    name:"aodiA8",
                    price:"70wan",
                    color:"black"
                },
                str:'hello'
            },
            methods:{
                add(){
                    const p = {id:'004',name:'老刘',age:'21'}
                    this.persons.unshift(p)
                }
            }
        })
        </script>
	</body>
</html>