条件渲染列表渲染

条件渲染

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使用。

条件渲染：

1. v-if：

   写法 v-if=”表达式“

   ​ v-else-if=”表达式“

   ​ v-else=”表达式“

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

   特点：不展示的DOM直接移除，后期无法访问节点了

   注意：v-if，v-else-if，v-else要连着写，中间不能断。

2. 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"的区别,前者是对象和索引值，后者是值与键

其实字符串也可以遍历，没写...

总结

1. ​ 可以使用v-for指令展示列表数据
2. 语法 v-for="(item, index) in xxx" :key="yyy"
3. 可以遍历数组，对象，字符串，指定次数

标签：name,show,age,渲染,else,条件,列表,表达式
来源： https://www.cnblogs.com/DHang777/p/16696282.html