Vue笔记——9.事件处理

小妍Vue笔记——目录

Vue笔记——1.基本语法指令

Vue笔记——2.搭建脚手架并快速创建Vue项目

Vue笔记——3.实例

Vue笔记——4.模板语法

Vue笔记——5.计算属性

Vue笔记——6.Class 与 Style 绑定

Vue笔记——7.条件渲染

Vue笔记——8.列表渲染

Vue笔记——9.事件处理

Vue笔记——10.表单输入绑定

Vue笔记——11.组件

---

介绍

vue.js 使用的是 v-for 指令来处理组件元素的循环迭代逻辑。通常它会和 v-if 配合使用，达到我们所需要的处理逻辑。

v-for 的语法形式是 item in items，其中 items 就是我们要循环的数组，而 item 则是被迭代的数组元素的别名。

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

我们都知道既然有循环那肯定少不了对索引的处理。v-for 指令给我们提供了可选的第二个参数，即当前项的索引。

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

index 就是那个当前索引了。

你也可以使用 of 替代 in 作为分隔符。

<div v-for="item of items"></div>

在 v-for 里使用对象

是哒，很明显 v-for 也可以用来遍历一个对象的属性。

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {
   {
    value }}
  </li>
</ul>

也可以提供第二个参数为 property 名称 (也就是键名)

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

还可以用第三个参数作为索引

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