循环列表

var example1 = new Vue({el: '#example-1',data: {items: [{ message: 'Foo' },{ message: 'Bar' }]}
})

<ul id="example-1"><li v-for="item in items">{{ item.message }}</li>
</ul>

index是该元素的索引

<ul id="example-2"><li v-for="(item, index) in items">{{ parentMessage }} - {{ index }} - {{ item.message }}</li>
</ul>

循环字典

new Vue({el: '#v-for-object',data: {object: {firstName: 'John',lastName: 'Doe',age: 30}}
})

<div v-for="(value, key, index) in object">{{ index }}. {{ key }}: {{ value }}
</div>

vue数组操作

变异方法

注意下面两个都不是响应式的,
1.当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
2.当你修改数组的长度时，例如：vm.items.length = newLength
所以要使用下面的方法代替
1.Vue.set(vm.items, indexOfItem, newValue)
2.vm.items.splice(newLength)

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

非变异方法

filter()
concat()
slice()

对象数据操作

var vm = new Vue({data: {a: 1}
})
// `vm.a` 现在是响应式的vm.b = 2
// `vm.b` 不是响应式的

响应式的要使用
Vue.set(vm.userProfile, 'age', 27)

`<template>`

vue.js v-for相关推荐

Uncaught SyntaxError: The requested module ‘/node_modules/.vite/deps/vue.js?v=3e1adf4e‘ does not ...
vue3导入全局变量时,可以运行但是会一直显示报错,如图: 解决方法如下: 在 Vue.js 3 中,"@vue/runtime-core" 是一个包含 Vue.js 运行时核心的 ...
Uncaught SyntaxError: The requested module ‘/node_modules/.vite/vue.js?v=bd1817bb‘ does not provide
vite 2.7.8 启动后报错暂时不清楚是 2.7.8 的版本问题还是其他问题.将版本降低到 2.6.13 解决还有可能是vite 预编译缓存的问题,把 node_modules 下的 .vit ...
vue -V查看vue版本时，提示vue.js缺少标识符
vue -V查看vue版本时,提示vue.js缺少标识符出现的错误提示如下图. 我的解决办法: win+R打开 cmd 输入 where vue. 找到D:\a_tools\vue,删除该文件夹中的 ...
vue.js安装过程(npm安装)
一.开发环境 vue推荐开发环境: Node.js: JavaScript运行环境(runtime),不同系统直接运行各种编程语言 npm: Nodejs下的包管理器. webpack: 它主要的用途 ...
vue.js+socket.io打造一个好玩的新闻社区
title: Socket.io+vue打造新闻社区 date: 2017-06-12 20:19:05 tags: [vue.js,javascript,socket.io] vue2.0 + so ...
一份不错的vue.js基础笔记！！！！
第一章 Vue.js是什么? Vue(法语)同view(英语) Vue.js是一套构建用户界面(view)的MVVM框架.Vue.js的核心库只关注视图层,并且非常容易学习,非常容易与其他库或已有的项 ...
运用vue.js写的表格小demo
2019独角兽企业重金招聘Python工程师标准>>> 最近在学习vue.js,我把工作中项目里面的一个小实例用vue.js重构了下,写成一个小demo,巩固自己所学,并与大家分享, ...
什么是Vue.js？||为什么要学习流行框架||框架和库的区别？||MVC和MVVM的关系图解
什么是Vue.js? Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的,需要借助于W ...
宝塔面板部署nuxt_MacOS下创建及部署vue.js项目（及Nuxt.js、PM2等相关流程）
开发环境权限准备为避免后续流程出现权限不足的相关提示,首先在终端中输入以下代码检查当前系统是否已开启了对系统文件夹的保护: csrutil status 若结果为csrutil enabled,则 ...
Vue.js(一) Vue.js + element-ui 扫盲
Vue.js(一) Vue.js + element-ui 扫盲 2018年12月09日 20:32:59 vbirdbest 阅读数 7043更多分类专栏: Vue.js + ElementUI ...

vue.js v-for