<!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. Gym - 100548H The Problem to Make You Happy 2014-2015 ACM-ICPC, Asia Xian Regional Contest (BFS+博弈)

    题意:Bob和Alice在一张有向无环图上移动,给定二者的起点,Bob先手.Bob的失败条件是不能移动或者与Alice相遇.两个人都采取最优策略,求Bob是否会赢 分析:银牌题.先确定所有的失败状态, ...

  2. 基于Python的接口测试框架实例

    文章来源:http://www.jb51.net/article/96481.htm 下面小编就为大家带来一篇基于Python的接口测试框架实例.小编觉得挺不错的,现在就分享给大家,也给大家做个参考. ...

  3. 打印std::tuple的N总方式

    方式一:递归 + 类模板特化方式 template<typename Tuple, std::size_t N> struct tuple_printer { static void pr ...

  4. Python笔记 #02# Inner workings of lists

    源:DataCamp datacamp 的 DAILY PRACTICE  + 日常收集. List of lists Subset and conquer Slicing and dicing Li ...

  5. 20145327实验二Java面向对象程序设计

    Java面向对象程序设计 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉S.O.L.I.D原则 了解设计模式 伪代码,产品代码,测试代码的应用 ...

  6. 20145328 《Java程序设计》第9周学习总结

    20145328 <Java程序设计>第9周学习总结 教材学习内容总结 第十六章 整合数据库 16.1JDBC 16.1.1JDBC简介 JDBC(Java DataBase Connec ...

  7. JavaScript中字符操作之大小写转换

    1.toUpperCase()   方法用于把字符串转换为大写 var str = prompt("请输入需转换大写的字符串:"); str = str.toUpperCase() ...

  8. html-w3c规范及常见标签

    W3C提倡的web结构: 内容(HTML)与表现(css样式)分离 内容(HTML)与行为(JS)分离 HTML内容结构要求语义化 基本规范: 标签名和属性名称必须小写 HTML标签必须关闭 属性值必 ...

  9. RabbitMQ入门(3)——发布/订阅(Publish/Subscribe)

    在上一篇RabbitMQ入门(2)--工作队列中,有一个默认的前提:每个任务都只发送到一个工作人员.这一篇将介绍发送一个消息到多个消费者.这种模式称为发布/订阅(Publish/Subscribe). ...

  10. Python性能(转)

    第一部分 阅读 Zen of Python,在Python解析器中输入 import this. 一个犀利的Python新手可能会注意到"解析"一词, 认为Python不过是另一门 ...