条件渲染
v-if：
写法：
v-if="表达式"
v-else-if="表达式"
v-else
适用于：切换频率较低的场景
特点：不展示的DOM元素直接被移除
注意：v-if可以和v-else-if、v-else一起使用，但要求结构不能被打断
v-show：
写法：v-show="表达式"
适用于：切换频率较高的场景
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到
<body>
<div id="root">
<h2>当前的n值是:{{n}}</h2>
<button @click="n++">n+1</button>
<h2 v-show="true">Hello</h2>
<div v-if="n === 1">你好</div>
<div v-else-if="n === 2">我好</div>
<div v-else>大家好</div>
</div>
</body>
v-for：
- 用于展示列表数据
- 语法：
<li v-for="(item, index) in xxx" :key="yyy">，其中key可以是index，也可以是遍历对象的唯一标识 - 可遍历：数组、对象、字符串（用的少）、指定次数（用的少）
<div id="root">
<h2>人员列表（遍历数组）</h2>
<ul>
<li v-for="(p,index) in persons" :key="index">
{{p.name}}-{{p.age}}
</li>
</ul>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
