vue学习笔记-8-循环结构

最新推荐文章于 2022-02-09 23:54:46 发布
最新推荐文章于 2022-02-09 23:54:46 发布
阅读量127 收藏
点赞数
分类专栏： # vue基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42349568/article/details/108201858
版权

一，v-for遍历数组

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			[v-cloak]{
			 	display:none
			 }
			 #app{
				 width: 20%;
				 margin: 200px auto;
				 line-height: 40px;
				 border: 1px solid #ccc;
				 padding: 10px;
			 }
			#app >.test{
				height: 30px;
				width: 100%;
				background: blue;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div v-for="(item,index) in list">{{item}}+-------------+{{index}}</div>
		</div>
		 
		<script type="text/javascript" src="./js/vue.min.js"></script>
		<script type="text/javascript">
			var vm=new Vue({
				el: "#app",
				data:{
					list:['yellow','blue','green']
				},
				methods:{
					change:function(){
						this.flag=!this.flag
					}
				}
				
			})
		</script>
	</body>
</html>

就会创建出三个li 出来：
在这里插入图片描述

二，v-for遍历对象

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			[v-cloak]{
			 	display:none
			 }
			 #app{
				 width: 20%;
				 margin: 200px auto;
				 line-height: 40px;
				 border: 1px solid #ccc;
				 padding: 10px;
			 }
			#app >.test{
				height: 30px;
				width: 100%;
				background: blue;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div v-for="(value,key,index) in obj">{{value}}-------------{{key}}-------------{{index}}</div>
		</div>
		 
		<script type="text/javascript" src="./js/vue.min.js"></script>
		<script type="text/javascript">
			var vm=new Vue({
				el: "#app",
				data:{
					obj:{
						name:"zhangsan",
						age:20,
						sex:"male"
					}
				},
				methods:{
					change:function(){
						this.flag=!this.flag
					}
				}
				
			})
		</script>
	</body>
</html>

在这里插入图片描述

三，v-if和v-for的结合使用

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			[v-cloak]{
			 	display:none
			 }
			 #app{
				 width: 20%;
				 margin: 200px auto;
				 line-height: 40px;
				 border: 1px solid #ccc;
				 padding: 10px;
			 }
			#app >.test{
				height: 30px;
				width: 100%;
				background: blue;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div v-if="index==1" v-for="(value,key,index) in obj">{{value}}-------------{{key}}-------------{{index}}</div>
			<!-- 只有index等于1的时候，才会渲染出这个元素 -->
		</div>
		 
		<script type="text/javascript" src="./js/vue.min.js"></script>
		<script type="text/javascript">
			var vm=new Vue({
				el: "#app",
				data:{
					obj:{
						name:"zhangsan",
						age:20,
						sex:"male"
					}
				},
				methods:{
					change:function(){
						this.flag=!this.flag
					}
				}
				
			})
		</script>
	</body>
</html>

在这里插入图片描述

笑道三千
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue学习之循环结构（十）
weixin_43857520的博客
08-27 198
2、分支循环结构 <li v-for='item in list'>{{item}}</li> <li v-for='(item,index) in list'>{{item}} + '---' +{{index}}
vue的循环结构v-for
AIROU_ao的博客
11-04 207
这个默认的模式是高效的，但是在更多的时候，并不需要这样去处理，所以，为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，需要为每项提供一个唯一key特性，Vue会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。因为v-for的优先级比v-if的优先级高,所以每次渲染时都会先循环再进行条件判断,而又因为v-if会根据渲染条件为ture或false来决定渲染与否的,所以如果将v-if 和 v-for 用在一起会特别消耗性能。
vue基础语法之分支循环结构
poppy995的博客
08-02 394
分支循环结构 分支结构 v-if v-eles v-eles-if v-show false 隐藏 true显示 v-if和v-show的区别 `v-if`控制元素是否渲染到页面 v-show控制元素是否显示(已经渲染了页面) v-if适用于操作不是很多的情况 隐藏就是把这个元素删除掉(removeChild) v-show 频繁操作 隐藏就是display:none 循环结构 循环结...
009_Vue循环结构
aihiao的专栏
02-09 238
1. 循环结构 1.1. v-for遍历数组, key的作用, 帮助Vue区分不同的元素, 从而提高性能。 <ul v-for="item in books"> <li>{{item}}</li> </ul> <ul v-for="(item, index) in books"> <li>[{{index}}] {{item}}</li> </ul> <ul :key="item.id" v-
vue.js循环for（列表渲染）详解
weixin_34130269的博客
01-02 6344
vue.js循环for（列表渲染）详解 一、总结 一句话总结： v-for <ul id="example-1"> <li v-for="item in items"> {{ item.message }} </li> </ul> var example1 = new Vue({ el: '#example-1...
Vue：循环结构
qq_41421033的博客
10-03 201
循环结构 v-for 用于循环的数组里面的值可以是对象，也可以是普通元素 <ul id="example-1"> <!-- 循环结构-遍历数组 item 是我们自己定义的一个名字 代表数组里面的每一项 items对应的是 data中的数组--> <li v-for="item in items"> {{ item.message }} </li> </ul> <script> new Vue
vue学习笔记，学习vue从0-1的步骤
09-21
8. **Vue调试**：开发者可以通过浏览器的开发者工具，特别是Vue插件，来调试Vue应用。这可以帮助查看组件实例、数据变化、虚拟DOM树等信息。 9. **SpringBoot集成**：在后端开发中，SpringBoot是一个常用的选择。它...
vue学习笔记
11-22
本学习笔记将涵盖Vue的基础概念、核心特性以及常见应用场景，帮助初学者建立起对Vue的全面理解。 一、Vue.js简介 Vue.js的核心理念是通过声明式的模板语法来简化DOM元素的更新，实现数据驱动视图。它采用MVVM...
vue开发CM-2023C-ma开发笔记
最新发布
06-06
Vue.js 是一款轻量级的前端JavaScript框架，以其易学易用、高性能和组件化的特点在Web开发领域受到广泛欢迎。...通过阅读这个开发笔记，开发者可以学习到Vue.js在实际项目中的运用，提升自己的前端开发技能。
Vue学习笔记
04-29
Vue的学习笔记通常会包含以下核心知识点： 1. **基础概念**：Vue的核心特性包括数据绑定、指令系统、组件化、生命周期、虚拟DOM等。数据绑定允许开发者用双大括号`{{ }}`在HTML中直接展示Vue实例中的数据。指令系统...
TensorFlow2-keras-Vue开发笔记
05-28
在本篇中，我们将深入探讨如何使用TensorFlow 2、Keras库以及Vue.js前端框架进行深度学习应用的开发。TensorFlow 2是Google推出的强大的机器学习库，它提供了高级API Keras，使得构建和训练神经网络变得更为简单。...
vue获取子组件元素
weixin_42349568的博客
02-02 7780
一，vue的this.children和this.children和this.children和this.parent this.$children中存放的是当前vue页面的所有子组件的数组集合。 每一个子组件中的数据和函数都可以被访问到。 例如： 子组件： <template> <div> <h3>这是子组件的内容</h3> <button @click="change">按钮触发事件</button
vue学习笔记-节接口调用-async和await
weixin_42349568的博客
08-30 2538
一，基本使用 其实就是之前学过的异步函数，异步编程在函数前写一个ansyc，就转化为异步函数，返回的是一个promise对象，于是就可以使用await关键字，可以把异步函数写成同步函数的形式，极大地提高代码的可读性。 原本的： axios.get('adata',{ params:{ id:123, name:'zhangsan' } }).then(function(ret){ console.log(ret)
区分开发环境、测试环境、生产环境不同访问地址的配置系列--（一）常见的配置方法
weixin_42349568的博客
03-01 2009
一，根目录新建.env.test文件 内容： NODE_ENV = 'ceshi' 二，配置baseurl文件 let baseUrl= ""; //这里是一个默认的url，可以没有 switch (process.env.NODE_ENV) { case 'development': baseUrl = "http://localhost:8080/dcxt/shop/" //开发环境url break case 'test': // 需
vue学习笔记-接口调用fetch用法
weixin_42349568的博客
08-29 1893
一，fetch概述 二，fetch基本用法 第一个then是fetch的一部分，返回一个promise对象，于是可以继续用then来处理返回的结果ret。 这段代码是服务器的代码： //这是在创建服务器，通过express，创建名为app的服务器 const express=require('express') const app=express() //为获取post参数 const bodyParser=require('body-parser') //拦截所有的请求，对post请求做出处理，把参数
对作用域插槽的理解：slot-scope
weixin_42349568的博客
09-20 1264
一，先来看看普通的组件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/base.css"/> <style type="text/css"> #app{ width: 20%; marg
v-for循环下动态绑定ref后undefine的解决方式
weixin_42349568的博客
04-03 1188
一，实现效果 上面和下面是v-for渲染出来的，中间是写死ref渲染出来的： 二，原因分析 html的代码： <!-- 头部区域的样式 --> <!-- 头部区域的样式 --> <div class="styleHeader"> <div v-for="(item,index) in topStyle" :key="index" :class="[styleClass(topStyle,item.content)]" v-show="item.checked
vue的父子组件属性绑定传值
weixin_42349568的博客
01-19 864
一，可以通过对象，设定接收的属性类型和默认值 二，可以在接收时默认参数，但是父组件在调用时，若是本组件变量则需要属性绑定，若是字符串内联写，则按普通的属性来 父组件要传的是变量，则属性绑定： 父组件要传的是字符串，则普通属性写法： 三，多层子组件的事件可以不断$emit到最外层来 ...
vue学习笔记-16-vue的数组方法
weixin_42349568的博客
08-26 752
vue页面上的数据和vm中的数据是实时一致的，而原生的数组方法无法实现这一点，所以vue中的数组方法经过了二次处理。然而用法还是和之前的一样。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/base.css"/> &l.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值