<!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 1204 Word Puzzles(AC自动机)

    题目大意:原题链接 给定一个字符串矩阵和待查找的单词,可以朝8个不同的方向查找,输出待查找单词第一个字母在矩阵中出现的位置和该单词被查到的方向. A~H代表8个不同的方向,A代表正北方向,其他依次以4 ...

  2. 2017 Multi-University Training Contest - Team 4 hdu6070 Dirt Ratio

    地址:http://acm.split.hdu.edu.cn/showproblem.php?pid=6070 题面: Dirt Ratio Time Limit: 18000/9000 MS (Ja ...

  3. Java-线程池专题（什么是线程池，如何使用，为什么要用）

    1.什么是线程池:  java.util.concurrent.Executors提供了一个 java.util.concurrent.Executor接口的实现用于创建线程池 多线程技术主要解决处理 ...

  4. 为什么gitHub提交记录显示作者名称是unknow?

    unknow,为什么? gitHub上提交记录显示作者名称是unknow,刚开始没怎么管,后面遇到问题看提交记录时发现有两个unknow(一定有一个人遇到和我一样的问题了,哈哈..),于是解决一下吧. ...

  5. JS类、对象、方法、prototype、_proto_

    案例代码: function People(name) { //对象属性 this.name = name; //对象方法 this.Introduce = function() { alert(&q ...

  6. Python3.x：chrome运行webdriver脚本提示--ignore-certificate-errors

    Python3.x:chrome运行webdriver脚本提示--ignore-certificate-errors 1,分析原因: 根本原因是Chromedriver和Chrome的版本不兼容: 网 ...

  7. VS+Qt

    1.安装vs 2.安装qt[带msvc编译器的] 3.安装addin插件 4.新建qt app项目 5.在qt options里添加qt版本 路径添加到msvc那一层,如:E:\Qt5.9\5.9\m ...

  8. lucene 简介和实践 分享

    之前项目做了搜索的改造,使用lucene,公司内做了相关的技术分享,故先整理下ppt内容,后面会再把项目中的具体做法进行介绍 lucene 简介和实践  分享 搜索改造项目

  9. gulp构建例子(ubuntu)

    1.项目结构和生产之后的目录 2.gulpfile.js // 载入插件 var gulp = require('gulp'), //本地安装gulp所用到的地 sass = require('gul ...

  10. 组合数模板 - Lucas

    2017-08-10 19:35:32 整理者:pprp 用于计算C(m,n) % p 代码如下: //lucas #include <iostream> using namespace ...