跟着网上学Vue之条件和循环

本是古典何须时尚 2023-07-20 13:37 36阅读 0赞

## 条件判断 ##

1.  **v-if**

直接上例子！（body标签内）

<script type="text/javascript" src="js/vue.js"></script>
    		
    		<div id="test">
    			<span v-if="ok">这里有一些水果：</span>
    			<template v-if="check">
    				<p>苹果</p>
    				<p>香蕉</p>
    				<p>雪梨</p>
    			</template>
    			</div>
    			<script type="text/javascript">
    				new Vue({ 
    					el:'#test',
    					data:{ 
    						ok:true,
    						check:true
    					}
    				});
    			</script>

结果可直接复制运行测试

1.  **v-else**

直接上代码，在上面的基础上就加上一句

<span v-if="ok">这里有一些水果：</span>
    	<span v-else>这里没有水果</span>
    	<template v-if="check">
    		<p>苹果</p>
    		<p>香蕉</p>
    		<p>雪梨</p>
    	</template>

1.  **v-else-if**

直接上代码

<div id="test">
    			<span v-if="check=='A'">100</span>
    			<span v-else-if="check=='B'">90</span>
    			<span v-else-if="check=='C'">80</span>
    			<span v-else-if="check=='D'">70</span>
    			<span v-else>60</span>
    			
    			</div>
    			<script type="text/javascript">
    				new Vue({ 
    					el:'#test',
    					data:{ 
    						ok:true,
    						check:'A'
    					}
    				});
    			</script>

**v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。**

1.  **v-show**

<div id="test">
    			<span v-if="check=='A'">100</span>
    			<span v-else-if="check=='B'">90</span>
    			<span v-else-if="check=='C'">80</span>
    			<span v-else-if="check=='D'">70</span>
    			<span v-else>60</span>
    			<p v-show="ok">我在这里</p>
    			</div>
    			<script type="text/javascript">
    				new Vue({ 
    					el:'#test',
    					data:{ 
    						ok:true,
    						check:'A'
    					}
    				});
    			</script><div id="test">
    		
    			<p v-show="ok">我在这里</p>
    			</div>
    			<script type="text/javascript">
    				new Vue({ 
    					el:'#test',
    					data:{ 
    						ok:true,
    						check:'A'
    					}
    				});
    			</script>

## 循环 ##

循环使用 v-for 指令。

1.  **形式一**`v-for="todo in todos"`（单标签）  
    v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。

v-for 可以绑定数据到数组来渲染一个列表：

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    		<div id="test">
    			<ul>
    				<li v-for="todo in todos">
    					{ { todo.text}}
    				</li>
    			</ul>
    		</div>
    		<script type="text/javascript">
    			var v = new Vue({ 
    				el:'#test',
    				data:{ 
    					todos:[{ text:'Jafe'},
    						{ text:'Charlotte'},
    						{ text:'哈哈哈'}]
    				}
    			});
    		</script>

效果图：  
![在这里插入图片描述][20200401222836565.png]

1.  **形式二**`v-for="todo in todos"`（块标签）

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    		<div id="test">
    			<ul>
    			<div v-for="todo in todos">
    				<li >
    					{ { todo.text}}
    				</li>
    				<li>
    					--------------------
    				</li>
    				</div>
    			</ul>
    		</div>
    		<script type="text/javascript">
    			var v = new Vue({ 
    				el:'#test',
    				data:{ 
    					todos:[{ text:'Jafe'},
    						{ text:'Charlotte'},
    						{ text:'哈哈哈'}]
    				}
    			});
    		</script>

效果图：  
![在这里插入图片描述][20200401223207539.png]

1.  **形式三**`todo in todos`（整个对象）

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    		<div id="test">
    			<ul>
    			<div v-for="todo in todos">
    				<li >
    					{ { todo}}
    				</li>
    				<li>
    					-----分割线--------
    				</li>
    				</div>
    			</ul>
    		</div>
    		<script type="text/javascript">
    			var v = new Vue({ 
    				el:'#test',
    				data:{ 
    					todos:{ 
    						text:'Jafe',
    						number:123,
    						age:22
    					}
    				}
    			});
    		</script>

效果图：  
![在这里插入图片描述][20200401223517976.png]

4.**形式四**`v-for="(todo,key) in todos"`（值，键）

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    		<div id="test">
    			<ul>
    			<div v-for="(todo,key) in todos">
    				<li >
    					{ { key}}:{ { todo}}
    				</li>
    				<li>
    					-----分割线--------
    				</li>
    				</div>
    			</ul>
    		</div>
    		<script type="text/javascript">
    			var v = new Vue({ 
    				el:'#test',
    				data:{ 
    					todos:{ 
    						text:'Jafe',
    						number:123,
    						age:22
    					}
    				}
    			});
    		</script>

效果图：  
![在这里插入图片描述][20200401223725240.png]

1.  **形式五**`v-for="(todo,key,index) in todos"`（值，键，索引）

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    		<div id="test">
    			<ul>
    			<div v-for="(todo,key,index) in todos">
    				<li >
    					{ { index}}:{ { key}}:{ { todo}}
    				</li>
    				<li>
    					-----分割线--------
    				</li>
    				</div>
    			</ul>
    		</div>
    		<script type="text/javascript">
    			var v = new Vue({ 
    				el:'#test',
    				data:{ 
    					todos:{ 
    						text:'Jafe',
    						number:123,
    						age:22
    					}
    				}
    			});
    		</script>

效果图：  
![在这里插入图片描述][20200401223903706.png]

1.  **形式六**`v-for="site in 10"`（常数形式）

<script type="text/javascript" src="js/vue.js"></script>
    		
    		<div id="test">
    			<ul>
    				<li v-for="site in 10">
    					这是第{ { site}}个
    				</li>
    			</ul>
    			</div>
    			<script type="text/javascript">
    				new Vue({ 
    					el:'#test'
    				});
    			</script>

效果图：  
![在这里插入图片描述][20200401224128335.png]

[20200401222836565.png]: /images/20230528/c0b0060e505b494884c48544f9ceffeb.png
[20200401223207539.png]: /images/20230528/e3baefce8571407fad79b243e24fea3e.png
[20200401223517976.png]: /images/20230528/4c57f0807500473da1f87722052b86c9.png
[20200401223725240.png]: /images/20230528/289ab27068274efc9f22b621517dd96b.png
[20200401223903706.png]: /images/20230528/a6bb7a78bb2a4e64974ccd27a910f11a.png
[20200401224128335.png]: /images/20230528/c55cd9e6044a4526a0213bf763e2839e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，36人围观）

还没有评论，来说两句吧...

相关阅读

相关跟着官网学 Vue - 事件

1. 触发与监听事件：在组件的模板表达式中，可以直接使用 `$emit` 方法触发自定义事件。

秒速五厘米/ 2024年02月05日 15:07/ 0 赞/ 138 阅读

相关跟着官网学 Vue - Props

1. Props 的声明：组件需要显式声明它所接受的 props。可以使用 `props` 选项来定义，可以是一个字符串数组，也可以是一个对象。

清疚/ 2024年02月05日 15:06/ 0 赞/ 239 阅读

相关跟着官网学 Vue - 基础

1、跟 Vue 说 Hello World！  <script>

今天药忘吃喽~/ 2024年02月05日 14:50/ 0 赞/ 137 阅读

相关跟着 Guava 学 java 之 Hashing

![format_png][] Java 内建的 hash code 为 32 位的，但是没有分离`散列算法`和它们`所作用的数据`，因此很难用备选算法进行替换。 ![fo

雨点打透心脏的1/2处/ 2023年10月03日 23:41/ 0 赞/ 117 阅读

相关跟着网上学Vue之样式绑定

class属性从某鸟教程里面发现一段代码，容易搞混在style中添加的样式： .active { width: 100px; he

柔情只为你懂/ 2023年07月20日 13:53/ 0 赞/ 208 阅读

相关跟着网上学Vue之计算属性（computed）

转自：https://www.runoob.com/vue2/vue-computed.html 该网站例子比较好，而且比较易懂。 1. 例一、实现字符串反转

朴灿烈づ我的快乐病毒、/ 2023年07月20日 13:40/ 0 赞/ 79 阅读

相关跟着网上学Vue之条件和循环

条件判断 1. v-if 直接上例子！（body标签内） <script type="text/javascript" src="js/vue.js"></

本是古典何须时尚/ 2023年07月20日 13:37/ 0 赞/ 37 阅读

相关跟着网上学Vue之插值

插值 1. 文本插值数据绑定最常见的形式就是使用 `{ {...}}（双大括号）`的文本插值以下内容在body标签中 //vue引用 <

冷不防/ 2023年07月20日 12:12/ 0 赞/ 45 阅读

相关跟着文档学Vue（二）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

逃离我推掉我的手/ 2022年05月27日 11:44/ 0 赞/ 294 阅读

相关跟着文档学vue（一）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

蔚落/ 2022年05月27日 07:19/ 0 赞/ 361 阅读