vue中v-for指令的使用之Vue知识点归纳(八)
本文章将描述
- vue 指令 v-for 的基本使用
1 简述
vue 指令 v-for 用来操作 dom ,常用于数组元素的操作
2 案例
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=divice-width,initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>vue v-for指令</title><style>.active {border: 1px solid red;margin: 10px;}</style>
</head><body><div id="app"><div class="active">vue v-for指令</div><ul><!-- item 是从数组中取出来的元素 可自定义名称 --><!-- in 是关键字不可修改 --><!-- indexArr 是 vue 中定义的数组 --><li v-for="item in indexArr">{{item}} : 在这里实现</li></ul><ul><!-- item 是从数组中取出来的元素 可自定义名称 --><!-- index 是 for 循环中的索引角标 从0开发 可自定义名称--><!-- in 是关键字不可修改 --><!-- objectArr 是 vue 中定义的数组 --><li v-for="(item,index) in objectArr">序号 {{index}} : 姓名{{ item.name }} 年龄{{item.age}}</li></ul></div><!-- 开发环境版本,包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el: "#app",data: {indexArr: [1, 2, 3, 4],// 对象数据类型objectArr: [{ name: "张三", age: 12 },{ name: "李四", age: 18 },{ name: "王五", age: 22 },],},})</script>
</body></html>
效果图:
3 总结
vue中v-for指令的使用之Vue知识点归纳(八)相关推荐
- vue中js文件里获取this(vue实例)
vue中js文件里获取this(vue实例) 1,在main.js中抛出vue实例,在需要用到的地方引入即可 main.js里let vueThis= new Vue({el: '#app',rout ...
- Vue中禁止输入表情符号指令
参考地址:vue el-input中禁止输入表情符号_笑到世界都狼狈的博客-CSDN博客_输入框禁止输入表情 你知道compositionstart和compositionend吗 - 掘金 cons ...
- vue中组件的导出导入_5.2 vue中 keep-alive 组件的作用,详细解释keep-alive使用方法...
问题:vue中 keep-alive 组件的作用 keep-alive:主要用于保留组件状态或避免重新渲染. 比如: 有一个列表页面和一个 详情页面,那么用户就会经常执行打开详情=>返回列表=& ...
- 关于Vue中$nextTick的作用及实现原理(Vue进阶)
Hello,大家好,最近找工作的路途依然艰难,但是要一直保持对技术的热爱!今天继续跟大家探索一下Vue进阶的内容,这次研究一下Vue的全局API中的$nextTick,这是一个很常用,也是经典的API ...
- 如何实现vue中的列表动画,如何封装vue动画
文章目录 一.vue中的列表动画如何实现 列表动画原理: 二.vue中如何封装动画 第1个版本:css动画版 第2个版本: js动画版(推荐) 一.vue中的列表动画如何实现 举个例子: 列表动画原理 ...
- vue中开发多语言(国际化),vue+i18n(详细教程)
目录 第一步: 第二步: 第三步: 第四步: 最后: 前言:我们有时候会遇到一个项目需要支持多语言,而用直接翻译的插件时常会导致翻译的结果跟自己预想的有所偏差或者结果太长造成页面结构紊乱而这个时候就需 ...
- vue中tab切换前端实现_使用vue实现tab操作
tab功能在网页中是比较常见的,那么用vue怎么实现tab操作呢,与jQuery实现tab的思路有什么区别呢? 在使用jQuery类库实现tab功能时,是获取鼠标在mousenter或click时的i ...
- vue中级联选择器回填_浅谈Vue使用Cascader级联选择器数据回显中的坑
业务场景 由于项目需求,需要对相关类目进行多选,类目数据量又特别大,业务逻辑是使用懒加载方式加载各级类目数据,编辑时回显用户选择的类目. 问题描述 使用Cascader级联选择器过程中主要存在的应用问 ...
- vue中通过自定义指令将汉字转化为首字母大写、首字母小写、大写、小写的拼音
使用情景: 在文本框中输入内容,例如姓名 在页面中将姓名转化为姓名的拼音,包括大写拼音.小写拼音.首字母大写拼音.大写拼音缩写.小写拼音缩写 新建一个 pinyin.js 文件 这是一串又臭又长的un ...
最新文章
- TypeError: sequence item 1: expected str instance, int found
- NET 5是.NET的未来:每个.Net开发人员必须知道什么
- 16 Java面试之 HTML
- (转载)安全漏洞概念及分类
- matplotlib xticks 基于 旋转_数据可视化之 matplotlib 绘图篇
- 您没有足够的全新为该计算机所有用户安装,我用的是admin管理员身份可安装软件弹出你没有足够的权限为该计算机所有用户完成此安装.请以管理员的身份登...
- 利用SVN的post-commit钩子实现多项目自动同步
- php只刷新一次,怎么让php网页指只刷新一次
- ORACLE利用scn赚钱,在Oracle中增进SCN及案例介绍
- 浅谈iOS中的蓝牙技术(二) CoreBluetooth
- 怎么在win10服务器上搭建网站,win10怎么搭建web服务器 win10搭建web服务器的方法...
- 四川民族学院数学系与计算机科学系,数学系、计算机科学系隆重举行学生表彰大会...
- 世界上最经典的25句话--摘抄
- linux内核源码分析之per-CPU
- 电脑C盘满了清理方法,电脑内存不足怎么解决
- 阅读笔记 |《哲学·科学·常识》陈嘉映
- android 点击按钮来回切换图片
- Linux安装tomcat,配置环境变量
- 万宁:地产行业如何摆脱“一次性利润”困局?
- Lingo 基础知识
热门文章
- AAAI 2020 | 首个使用 NAS 设计的 GCN,达到动作识别SOTA,代码将开源
- 5分钟就能完成的Python小项目,赶紧拿去玩玩吧
- 高效!Anchor DETR:旷视提出一种基于Transformer的目标检测神器!
- 推荐系统遇上深度学习(十一)--神经协同过滤NCF原理及实战
- 基础知识(九)boost+vs2015安装配置
- 复练-关于面试的科技树-简历的提升、问答环节
- 平面设计python教程_什么是平面设计? - Python学习教程的个人空间 - OSCHINA - 中文开源技术交流社区...
- 函数返回字符串指针C语言,C语言:利用指针和函数调用编写字符串拷贝函数strcpy...
- 设计模式 过滤器模式
- linux命令zip打包,linux下zip命令打包与解包