v-if&v-show&v-for语句

ゝ一纸荒年。 2021-09-17 10:24 226阅读 0赞

# v-if&v-show&v-for语句 #

下面是我的学习总结和示例

**备注：  
v-if和v-show的区别：  
v-if隐藏状态下的内容块的代码是删除掉的，显示则是再次创建代码。而v-show是通过dsiplay的block/none来控制元素的显示**

## v-if条件语句：条件判断 ##

要求：该对象默认为显示。点击按钮该对象为隐藏状态，再次点击则显示。  
**示例如下：**

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<script src="../js/vue.min.js"></script>
    </head>
    <body>
    	<div id="box">
    		<p v-if="show">你看见我的召唤师了吗？？？</p>
    		
    		<button @click="btns">btn</button>
    	</div>
    
    	<script>
    		new Vue({
    			el:"#box",
    			data:{
    				// 默认显示。为false则是默认隐藏
    				show:true
    			},
    			methods:{
    				btns:function(){
    					// 当前show(默认是true)不等于当前show(则是false)
    					this.show = !this.show;
    				}
    			}
    		})
    	</script>
    </body>
    </html>

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

## v-show:控制DOM的显示与否 ##

要求：该对象默认为显示。点击按钮该对象为隐藏状态，再次点击则显示。  
备注：最终效果和v-if的一样  
**示例如下：**

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<script src="../js/vue.min.js"></script>
    </head>
    <body>
    	<div id="box">
    		<p v-show="show">HELLO WORLD</p>
    		
    		<button @click="btns">按钮</button>
    	</div>
    
    	<script>
    		new Vue({
    			el:"#box",
    			data:{
    				// 默认显示。为false则是默认隐藏
    				show:true
    			},
    			methods:{
    				btns:function(){
    					// 当前show(默认是true)不等于当前show(则是false)
    					this.show=!this.show;
    				}
    			}
    		})
    	</script>
    </body>
    </html>

## v-for:控制一组数据的。通过该组数据来控制循环显示一些DOM结构 ##

要求：通过v-for在li遍历出文本和图片  
备注：通过v-for来在页面打印出DOM的一些结构，可以省略不少代码  
**示例如下：**

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>循环遍历出文本和图片</title>
    	<script src="../js/vue.min.js"></script>
    </head>
    <body>
    	
    	
    	
    	<div id="box">
    		<ul>
    			
    			<li v-for="(item,index) in list" :key="index">{
       {item}}</li>	
    			
    			<li v-for="item in li_img" style="width: 250px;height: 300px;float: left;margin: 10px 10px;">
    				
    				<img src="" alt="" :src="item.img" style="width: 100%;height: 100%;">
    				
    				<span>{
       {item.name}}</span>
    			</li>
    		</ul>
    	</div>
    
    	<script>
    		// 创建vue结构
    		new Vue({
    			el:"#box",
    			data:{
    				// 定义文本的数据组
    				list:[
    					1,2,3,4,5,6,7
    				],
    				// 定义文本和图片的数据组
    				li_img:[
    					{name:"1",img:'lol/1.png'},
    					{name:"2",img:'lol/2.png'},
    					{name:"3",img:'lol/3.png'},
    					{name:"4",img:'lol/4.jpg'},
    					
    				]
    			}
    		})
    	</script>
    </body>
    </html>

效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70]

[20181225143754269.gif]: /images/20210724/b05fb98d9c374134bd8ece942ec936e7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70]: /images/20210724/66f12effb43344c2b59ec28a8e00bd25.png