Vue 条件渲染
条件渲染
v-show
实质上是display:none,适用于切换频繁的场景
v-show可以拿到dom， v-if不一定
v-if
实质上是dom的增删，适用于切换不频繁的场景
写法:
v-if
v-else-if
v-else
template
template只能和v-if一起使用，不能和v-show一起使用
demo
<!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>
<script src="../lib/vue.js"></script>
<body>
<div id="root">
<ul>
<h1>遍历数组</h1>
<li v-for="(p,index) in persons" :key="p.id">
<span>{{p.name}}-{{p.id}}</span>
</li>
<h1>遍历对象</h1>
<li v-for="(value,key) of personObj" :key="key" >
<span>{{value.name}} - {{value.id}}</span>
</li>
<h1>遍历字符串</h1>
<li v-for="(value,index) in personStr" >
<span>{{value}} - {{index}}</span>
</li>
<h1>遍历指定次数</h1>
<li v-for="index of 5" >
<span>{{index}}</span>
</li>
</ul>
</div>
<script>
const vm = new Vue({
el: "#root",
data: {
persons: [
{ name: 'island1', id: 1 },
{ name: 'island2', id: 2 },
{ name: 'island3', id: 3 }
],
personObj:{
island1: { name: 'island1', id: 1 },
island2: { name: 'island2', id: 2 },
island3: { name: 'island3', id: 3 }
},
personStr:'island1'
}
})
</script>
</body>
</html>
