1. <!DOCTYPE html>
  2. <html>
  3.  
  4. 	<head>
  5. 		<meta charset="UTF-8">
  6. 		<title>v-for操作对象与数值</title>
  7. 		<script src="vue.js"></script>
  8. 	</head>
  9.  
  10. 	<body>
  11. 		<!--v-for操作对象-->
  12. 		<div id="lantian">
  13. 			<li v-for="(item,key,index) in user">
  14. 				{{index}}——{{key}}——{{item}}
  15. 			</li>
  16. 			<!--v-for操作数值-->
  17. 			<table border="1" width="100%">
  18. 				<tr v-for="v in 20">
  19. 					<td>{{v}}</td>
  20. 				</tr>
  21. 			</table>
  22. 		</div>
  23.  
  24. 		<script>
  25. 			var app = new Vue({
  26. 				el: '#lantian',
  27. 				data: {
  28. 					user: {
  29. 						name: '小明',
  30. 						age: '22',
  31. 						sex: 'boy'
  32. 					}
  33. 				}
  34. 			});
  35. 		</script>
  36. 	</body>
  37.  
  38. </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. HDU - 2204 Eddy's爱好 (数论+容斥)

    题意:求\(1 - N(1\le N \le 1e18)\)中,能表示成\(M^k(M>0,k>1)\)的数的个数 分析:正整数p可以表示成\(p = m^k = m^{r*k'}\)的形 ...

  2. 利用page_source抓取网页中的URL，进行链接测试

    selenium的page_source方法可以获取到页面源码,下面就把它应用到链接测试中. # coding:utf-8 __author__ = 'helen' import re,request ...

  3. SparkStreaming程序设计

    一个简单的 Streamin wordCount object StreamingWordCount { def main(args: Array[String]): Unit = { val spa ...

  4. Web前端页面的浏览器兼容性测试心得（二）搭建原汁原味的IE8测试环境

    如果你做的页面被老板或PM要求兼容IE8,你就值得同情了.IE8不支持HTML5,在2017年的前端界,开发者不涉及HTML5标准简直寸步难行.然而,有一个可怕的事实客观存在,那就是IE8是Win7系 ...

  5. 验证APNS证书的有效性

    openssl s_client -connect gateway.sandbox.push.apple.com:2195 -cert xxx.pem

  6. netty11---管道

    客户端: package com.server; import java.net.Socket; public class Client { public static void main(Strin ...

  7. git命令学习汇总

    GIT 版本控制常用命令汇总 git version 查看当前git版本信息 git help 获取全部命令帮助信息 git help <command> 获取指定命令帮助信息 git c ...

  8. JS对象深入剖析

    对象概述 Objects are mutable keyed collections.  An object is a container of properties, where a propert ...

  9. Android Studio开发学习 - 1. 添加Activity

    1. 项目上点右键,New -> Activity -> Blank Activity 这将生成Activity的 Layout.Class .和相关的配置信息(在AndroidManif ...

  10. [小问题笔记（五）] 用SQL加密字符串（MD5、SHA1），顺便解决读取数据加密后不一样的问题

    这里用到SQL Server内置的函数 HashBytes(). select HashBytes('MD5','bubu') select HashBytes('SHA1','bubu') 以MD5 ...