遍历对象

遍历对象的语法形式和遍历数组是一样的，即value in object，其中object是被迭代的对象，value是被迭代的对象属性的别名

演示代码：

<template>
  <div id="app">
    <ul>
      <li v-for="value in book">{{value}}</li>
    </ul>
    <router-view />
  </div>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      book: {
        title: 'vue',
        author: 'gk',
        isbn: '6662241'
      }
    }
  }
}

</script>

运行结果：

如果要获取对象的属性名，可以使用可选的属性名参数作为第二参数

演示代码：

<template>
  <div id="app">
    <ul>
      <li v-for="(value,key) in book">{{key}}:{{value}}</li>
    </ul>
    <router-view />
  </div>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      book: {
        title: 'vue',
        author: 'gk',
        isbn: '6662241'
      }
    }
  }
}
</script>

运行结果：

遍历对象的表达式还可以使用第三个参数作为索引
演示代码：

<template>
  <div id="app">
    <ul>
      <li v-for="(value,key ,index) in book">{{index}}-{{key}}:{{value}}</li>
    </ul>
    <router-view />
  </div>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      book: {
        title: 'vue',
        author: 'gk',
        isbn: '6662241'
      }
    }
  }
}
</script>

运行结果：

对象更新检测

由于JavaScript的限制，vue不能检测对象属性的添加和删除。要解决这个问题，可以使用vue全局的set()和delete()方法来添加和删除属性，或者vue实例的 $set()和$ delete()方法来添加和删除属性，并触发视图更新。

<template>
  <div id="app">
    <ul>
      <li v-for="(value,key ,index) in book">{{index}}-{{key}}:{{value}}</li>
    </ul>
    <button v-on:click="set()">添加属性</button>
    <button v-on:click="setdelete()">删除属性</button>
    <router-view />
  </div>
</template>
<script>
import Vue from 'vue'

export default {
  name: 'App',
  data() {
    return {
      book: {
        title: 'vue',
        author: 'gk',
        isbn: '6662241'
      }
    }
  },
  methods: {
    set() {
      Vue.set(this.book, 'sgg', '1233')
    },
    setdelete() {
      Vue.delete(this.book, 'isbn')
    }
  }
}
</script>

运行结果：

key属性

为了个vue一个提示，以便他能跟踪每个节点的身份，从而重用和重新排序现有的元素，需要为列表的每一项提供一个唯一key属性，key属性的类型只能是string和numder类型。

演示代码

<template>
  <div id="app">
    <p>id:<input type="text" v-model="bookid">
      s书名<input type="text" v-model="title">
      <button v-on:click="add()">添加</button>
    </p>
    <p v-for="book in books" v-bind:key="book.id">
      <input type="checkbox">
      <span>id:{{book.id}},书名：{{book.title}}</span>
    </p>

    <router-view />
  </div>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      bookid: 'a',
      title: 'a',
      books: [
        {
          id: 1,
          title: 'vue'
        }
      ]
    }
  },
  methods: {
    add() {
      this.books.unshift({ id: this.bookid, title: this.title }), (this.bookid = ''), (this.title = '')
    }
  }
}
</script>

运行结果：

vue指令3

点击查看上篇

遍历对象

对象更新检测

key属性