首页 > 其他分享 >Vue-循环渲染

Vue-循环渲染

时间:2022-08-31 00:44:24浏览次数:52  
标签:Vue 渲染 50 thing 循环 item time

循环渲染

  循环渲染使用的是v-for

<body>
		<div id="app">
			<div v-for="item in arr">{{item}}</div>
			<div v-for="item in arr2">{{item.time}}</div>
			<div v-for="item in arr2">{{item.thing}}</div>
		</div>
	</body>
	<script>
		new Vue({
			el:"#app",
			data:{
				arr:["打起精神!","打起精神来!!","胜利就在前方!!"],
				arr2:[{
					time:"08:50",
					thing:"上课了!"
				},{
					time:"9:50",
					thing:"下课了!!"
				},{
					time:"10:10",
					thing:"又上课了!!!"
				},{
					time:"11:50",
					thing:"干饭!!!!"
				}	
				]
			},
		})
	</script>

  

标签:Vue,渲染,50,thing,循环,item,time
From: https://www.cnblogs.com/forever-ljf/p/16641497.html

相关文章

  • Vue-样式绑定
    1.对class属性进行绑定<style> .app{ width:200px; height:200px; background-color:purple; } .app1{ width:100px; height:100px; bac......
  • vue3 基础-表单元素双向绑定
    通常是在form表单相关的场景中会用到双向绑定相关,核心是v-model的应用.input输入框<!DOCTYPEhtml><htmllang="en"><head><title>input</title><script......
  • 条件渲染(面试)
    v-if/v-else或者v-show<divid="app"><divv-if="flag">hello</div><divv-show="flag">world</div></div><scripttype="text/javascript">newV......
  • 循环渲染(面试)
    v-for1.for和if放在了同一个标签中没有先后顺序的要求,但是先执行for渲染过程为:对arr每一项先做map循环判断v-if给出的条件,再做一遍for循环渲染这样引起的问题是:arr......
  • VUE3.0+Antdv+Asp.net WebApi开发学生信息管理系统(完)
    在B/S系统开发中,前后端分离开发设计已成为一种标准,而VUE作为前端三大主流框架之一,越来越受到大家的青睐,Antdv是Antd在Vue中的实现。本系列文章主要通过Antdv和Asp.netWebA......
  • 父传子 子穿父 vue3
    不错的博客https://blog.csdn.net/qq_43895215/article/details/124626692......
  • Vue3打包部署Nginx
     1、在vue.config.js中配置如下1const{defineConfig}=require('@vue/cli-service')2module.exports=defineConfig({3transpileDependencies:tr......
  • vue——插槽的作用与理解
    1.作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于父组件===>子组件2.分类:默认插槽、具名插槽、作用域插槽3.使用方式:默认插槽:子组件:......
  • 启动Vue出现npm ERR! code ENOENT和npm ERR! Missing script: "serve"
    npmERR!codeENOENTnpmERR!syscallopennpmERR!pathD:\java\springbootAndVue\前端/package.jsonnpmERR!errno-4058npmERR!enoentENOENT:nosuchfile......
  • vue.js3: 多张图片合并([email protected])
    一,安装用到的第三方库1,安装:liuhongdi@lhdpc:/data/vue/pdf/image2pdf$npmi-Svuedraggable@nextadded2packagesin11s2,查看已安装的版本:liuhongdi@lhd......