标签：name show age 渲染 else 条件 列表 表达式

条件渲染

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。