条件渲染列表渲染
条件渲染
v-show:显示与隐藏内容
<h1 v-show="false">welcome to {{name}}</h1>
其中 v-show="false"里的东西只要是能返回布尔值的表达式就行,比如v-show="1<2"
v-if:彻底删除内容
<h1 v-if="false">welcome to {{name}}</h1>
因为v-show只是显示和隐藏,并没有删除,所以在切换频率比较高的场合用v-show。
还有v-else-if,v-else。v-if,v-else-if,v-else要连着写,中间不能断。
template的使用
<tempalte v-if="n === 1">
<h1>hello</h1>
<h2>dh</h2>
<tempalte>
tempalte的作用是在不破坏结构的前提下,对一组样式进行渲染,只能配合v-if使用。
条件渲染:
-
v-if:
写法 v-if=”表达式“
v-else-if=”表达式“
v-else=”表达式“
适用:切换频率比较低的场景
特点:不展示的DOM直接移除,后期无法访问节点了
注意:v-if,v-else-if,v-else要连着写,中间不能断。
-
v-show:
写法:v-show="表达式"
适用:切换频率高的场景
特点:不展示的DOM不会被移除,仅仅只是隐藏
列表渲染
遍历数组:
<ul>
<!-- <li v-for="p in persons" :key="p.id"> -->
<!-- 要保证key各不相同 id也许 index也行-->
<li v-for="(p, index) in persons" :key="index">
{{p.name}}-{{p.age}}-{{index}}
</li>
</ul>
persons:[
{id:'001', name:'dh',age:19},
{id:'002', name:'aa',age:18},
{id:'003', name:'cc',age:17}
]
}
遍历对象:
<ul>
<li v-for="(val, key) in car" :key="key">
{{val}}-{{key}}
</li>
</ul>
car:{
name : 'audi',
price : '700000',
color : 'black'
}
注意"(p, index) in persons"和"(val, key) in car"的区别,前者是对象和索引值,后者是值与键
其实字符串也可以遍历,没写...
总结
- 可以使用v-for指令展示列表数据
- 语法 v-for="(item, index) in xxx" :key="yyy"
- 可以遍历数组,对象,字符串,指定次数