<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>v-for操作对象与数值</title>

		<script src="vue.js"></script>

	</head>

	<body>

		<!--v-for操作对象-->

		<div id="lantian">

			<li v-for="(item,key,index) in user">

				{{index}}——{{key}}——{{item}}

			</li>

			<!--v-for操作数值-->

			<table border="1" width="100%">

				<tr v-for="v in 20">

					<td>{{v}}</td>

				</tr>

			</table>

		</div>

		<script>

			var app = new Vue({

				el: '#lantian',

				data: {

					user: {

						name: '小明',

						age: '22',

						sex: 'boy'

					}

				}

			});

		</script>

	</body>

</html>

　　

018——VUE中v-for操作对象与数值的更多相关文章

  1. 18.VUE学习之-v-for操作对象与数值

    一组数组时的循环 二组数组时的循环 另外可以v for 20 可以直接操作数字 <!DOCTYPE html> <html lang="en"> <h ...

  2. Vue v-for操作对象与数值

    <!doctype html> <html lang="en"> <head id="head"> <meta cha ...

  3. [记录] Vue中的dom操作

    使用过Vue的同学都应该有这样一个感觉,在vue中页面是基于数据驱动的,不需要我们自己操作dom,框架帮我们完成了这一步,事实上Vue官方也建议我们这样做 在绝大多数情况下是不需要操作dom就可以完成 ...

  4. vue中如何使用event对象

    原文地址 一.event 对象 (一)事件的 event 对象 你说你是搞前端的,那么你肯定就知道事件,知道事件,你就肯定知道 event 对象吧?各种的库.框架多少都有针对 event 对象的处理. ...

  5. vue 中的translation操作----动态值

    在vue中,也会遇见translate的情况,这里顺带也可以带上如何查找页面中的元素的案例. 1.在加载过程中,有会遇见加载顺序先后的问题,然后查找页面元素null的情况,所以在mounted的钩子函 ...

  6. 原生js中获取this与鼠标对象以及vue中默认的鼠标对象参数

    1.通过原生js获取this对象 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  7. Vue中可用的判断对象是否为空的方法

    vue有两个方法可用 1. JSON.stringify(evtValue)=='{}' 2. Object.keys(xxx).length==0 js判断对象是否为空对象的几种方法 1.将json ...

  8. Vue中的DOM操作

    1.在要获取的标签中添加 ref="xx" 示例: <button ref="btn">一个按钮</button> 2.在 mounte ...

  9. vue中改变数组或对象，页面没做出对应的渲染

    原文链接 数组更新检测 变异方法 Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.这些方法如下: push() pop() shift() unshift() splice() sor ...

随机推荐

  1. PKU 3169 Layout(差分约束系统+Bellman Ford)

    题目大意:原题链接 当排队等候喂食时,奶牛喜欢和它们的朋友站得靠近些.FJ有N(2<=N<=1000)头奶牛,编号从1到N,沿一条直线站着等候喂食.奶牛排在队伍中的顺序和它们的编号是相同的 ...

  2. JavaScript-dom4 date string 事件绑定

    内置date <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  3. CodeForces - 662C Binary Table (FWT)

    题意:给一个N*M的0-1矩阵,可以进行若干次操作,每次操作将一行或一列的0和1反转,求最后能得到的最少的1的个数. 分析:本题可用FWT求解. 因为其0-1反转的特殊性且\(N\leq20\),将每 ...

  4. vuejs模仿实现一个电影分享类网站

    前几天朋友发了一个电影分享类网站:http://dy.bingthink.top/ 感觉界面还挺好看的,所以打算用vuejs模仿写一个. 从后台转前端,要学习的东西挺多的,仅以此记录我的学习历程,闲的 ...

  5. C#打印类

    using System;using System.Collections.Generic;using System.Text;using System.Windows.Forms;using Sys ...

  6. EXTJS 下载

    Extjs各版本的下载链接 Extjs的版本繁多,本文收集了Extjs各个版本的下载链接,包括官网和非官网的,以及各种汉化版api,欢迎大家下载分享. Extjs最新版下载链接:http://www. ...

  7. 如何释放linux cache占用的内存

    [root@prd-fygl-app-01 ~]# free -m             total       used       free     shared    buffers     ...

  8. 【Head First Servlets and JSP】笔记 28： 过滤器与包装器

    1.过滤器的执行顺序: <url-pattern> 为第一梯队, <servlet-name> 为第二梯队,梯队内的执行顺序和 DD 里的声明顺序相同. When the co ...

  9. IDEA 安装插件报错 Plugin Lombok Plugin was not installed: Cannot download

    报错 解决 成功下载插件 3

  10. go channel 阻塞

    初接触 go 有不对得请解释下 Channel是goroutine之间进行通信的一种方式,先看下面代码为什么会阻塞: func closer(ch chan int) { ch <- 1 log ...