条件渲染、列表渲染

今天药忘吃喽~ 2023-07-13 13:46 25阅读 0赞

## 条件渲染 ##

### 1）v-if ###

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染。

Vue是否显示取决于type的取值为true则显示为false则不显示  
也可以用 v-else ：

type的取值为true则Oh no不显示；为false则显示Oh no  
***v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。***

### 2）v-else-if ###

当前代码页面显示为： Not A/B/C（因为type为空）  
若type值为A 则页面中将显示A（同理可得BC）  
***v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后***

### 3）v-show ###

用于根据条件展示元素的选项是 v-show 指令

<div id="app">
    	<h1 v-show="ok">Hello!</h1>
    </div>
    <script type="text/javascript">
    var vm = new Vue({
    	el : "#app",
    	data : {
    		ok : false
    	}
    });
    </script>

带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。（当ok为true时，h1将会切换元素的css属性display：block；）  
***注意：v-show 不支持 `<template>` 元素，也不支持 `v-else`。***  
**如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。**

## 列表渲染 ##

### 1）数组形式的列表渲染 ###

可以用 `v-for` 指令基于一个数组来渲染一个列表。v-for 指令需要使用 `item in items 形式的特殊语法`，其中 `items 是源数据数组`，而`item 则是被迭代的数组元素的别名`。  
遍历数组：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <script src="vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
    <div id="app">
    	<ul>
    		<li v-for="item,index in items" :key="index">//:key==@bind:key
    		{
       {index}}{
       { item.msg }}//index索引值
    		</li>
    	</ul>
    </div>
    <script type="text/javascript">
    var vm = new Vue({
    	el : "#app",
    	data : {
    		items : [//定义items数组
    			{ msg: 'Foo' },
    			{ msg: 'Bar' }
    		]
    	}
    });
    </script>
    </body>
    </html>

运行结果：  
![在这里插入图片描述][20200312215914744.png]

### 2）对象形式的列表渲染 ###

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <script src="vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
    <div id="app">
    	<ul>
    		<li v-for="value, key in object">
    			{
       {key}} : {
       { value }}/获取到/对象属性的值和名称
    		</li>
    	</ul>
    </div>
    <script type="text/javascript">
    var vm = new Vue({
    	el : "#app",
    	data : {
    		object: {//定义对象
    			title: 'How to do lists in Vue',
    			author: 'Jane Doe',
    			time: '2016-04-10'
    		}
    	}
    });
    </script>
    </body>
    </html>

运行结果：  
![在这里插入图片描述][2020031222051928.png]  
**为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性：**

[20200312215914744.png]: /images/20230529/90e94d2233d34425a4a8d97edb5349af.png
[2020031222051928.png]: /images/20230529/3952be12354b4ed6a63fa5a8e53564fa.png