vue之v-for使用说明
demo.html
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-html="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Vue Demo</title>
<!--自选版本-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>-->
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本,优化了尺寸和速度 -->
<!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
</head>
<body>
<div id="app">
<div>
<h2>v-for举例说明</h2>
<div>
<!--数组下标-->
<!--{{names[0]}}--> <!--数组遍历-->
<div>
<h3>数组遍历</h3>
<ul>
<li v-for="name in names">
{{name}}
</li>
</ul>
</div>
<hr>
<!--对象数组遍历-->
<div>
<h3>对象数组遍历</h3>
<ul>
<li v-for="user,index in users">
{{index+1}}.{{user.name}} - {{user.age}}
</li>
</ul>
</div>
<hr>
<div>
<h3>对象数组遍历(template)</h3>
<template v-for="user,index in users">
<p>
<span>{{user.name}}</span> -
<span>{{user.age}}</span>
</p>
</template>
</div>
<hr>
<div>
<h3>对象数组遍历(key-value)</h3>
<div v-for="user,index in users">
{{index+1}}.
<span v-for="value,key in user">
{{key}} : {{value}} 、
</span>
</div>
</div>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
app.js
var app = new Vue({
el: '#app',
data: {
names:["Tom","Lily","Mark"],
users:[
{"name":"Tom","age":"26"},
{"name":"Lily","age":"31"},
{"name":"Mark","age":"18"}
]
},
methods: {}, computed: {}
})
截图:
vue之v-for使用说明的更多相关文章
- Vue自己写组件——Demo详细步骤
公司近期发力,同时开了四五个大项目,并且都是用Vue来做的,我很荣幸的被分到了写项目公用模块的组,所以需要将公用的部分提取成组件的形式,供几个项目共同使用,下面详细讲一下写Vue组件的具体步骤. 一. ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇:传值+组件+项目说明
缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...
- Vue基础(环境配置、内部指令、全局API、选项、内置组件)
1.环境配置 安装VsCode 安装包管理工具:直接下载 NodeJS 进行安装即可,NodeJS自带 Npm 包管理工具,下载地址:https://nodejs.org/en/download/安装 ...
- vue集成环信IM
vue 集成环信im 简单demo 环信AppKey:1106190415055331#test 测试账号: test1 123456 test2 123456 test3 123456 默 ...
- Vue main.js 文件中全局组件注册部分
在 \src\components\index.js 文件中export组件 import HeaderList from './HeaderList' import HeaderMenu from ...
- vue.js的ajax和jsonp请求
首先要声明使用ajax 在 router下边的 Index.js中 import VueResource from 'vue-resource'; Vue.use(VueResource); ajax ...
- 如何在Vue项目中使用Typescript
0.前言 本快速入门指南将会教你如何在Vue项目中使用TypeScript进行开发.本指南非常灵活,它可以将TypeScript集成到现有的Vue项目中任何一个阶段. 1.初始化项目 首先,创建一个新 ...
- vue基础响应式数据
1.vue 采用 v……vm……m,模式,v---->el,vm---->new Vue(实例),m---->data 数据,让前端从操作大量的dom元素中解放出来. 2.vue响应 ...
- vue.js 配置axios 用来ajax请求数据
* 用npm 安装 axios 切换到项目的根目录 npm install --save axios vue-axios * 在vue的入口文件./src/main.js 中引入axios, 添加2行 ...
- 第六十二篇:Vue的双向绑定与按键修饰符
好家伙,依旧是vue的基础 1.按键修饰符 假设我们在一个<input>框中输入了12345,我们希望按一下"Esc" 然后删除所有前面输入的内容,这时候,我们会用到按 ...
随机推荐
- ESP8266串口和MQTT服务器消息互传(版本一) 单纯透传+保存WIFI账号信息
目标 制作一个ESP8266串口和MQTT相互透传的小WIFI,可用手机修改其连接的路由器,由此该模块可以任意加载到各种串口传输的单片机上,完成硬件到云端的传输. 1 实物图 2 MQTT网页测试客户 ...
- Python 中的浅拷贝和深拷贝
1. 列表和字典,直接赋值,都是浅拷贝,即赋值双方指向同一地址,因为 Python 对可变对象按引用传递. >>> a = [1, 2, 3] >>> b = a ...
- shell去除换行和空格
#!/bin/bash if [ -f str.txt ] ## 如果str.txt存在,则返回true then strval=$(cat str.txt|awk '{printf "%s ...
- 小小知识点(二)——如何修改win10 的C盘中用户下的文件夹名称
1.以管理员身份登录计算机 在win10桌面的开始界面处有个用户头像,点击在里面找到administrator: 如果没有,则需进行如下设置: (1)右键计算机,双击管理,找到如下所示的用户中的adm ...
- iOS开发 横向分页样式 可左右滑动或点击头部栏按钮进行页面切换
iOS开发 横向分页样式 可左右滑动或点击头部栏按钮进行页面切换 不多说直接上效果图和代码 1.设置RootViewController为一个导航试图控制器 // Copyright © 2016年 ...
- 泛函p121可分Hilbert空间都同构于l^2
如何理解最后面两句话, L^2与l^2同构 L^2里面 有理系数多项式 是可数稠密子集 所以L^2可分 可分Hilbert空间都同构于 l^2 傅里叶级数是一个稠密的子集
- RabbitMQ消息的交换
消息的交换 目录 RabbitMQ-从基础到实战(1)— Hello RabbitMQ RabbitMQ-从基础到实战(2)— 防止消息丢失 1.简介 在前面的例子中,每个消息都只对应一个消费者,即使 ...
- java.lang.LinkageError: JAXB 2.0 API is being loaded from the bootstrap classloader
我的解决办法: 1.如果是application工程,则在程序中打印出 system.out.println(System.getProperty("java.endo ...
- node path
1.path.basename(path[, ext]) ● path <string> ● ext <string> An optional file extension ● ...
- C# List用法 List介绍
一.#List泛型集合 集合是OOP中的一个重要概念,C#中对集合的全面支持更是该语言的精华之一. 为什么要用泛型集合? 在C# 2.0之前,主要可以通过两种方式实现集合: a.使用ArrayList ...