vue 指令 -3

作者：小恺

2022 年 6 月 07 日
本文字数：1495 字
阅读完需：约 5 分钟

遍历对象

遍历对象的语法形式和遍历数组是一样的，即 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>

复制代码

运行结果：

image.png

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

演示代码：

<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>

复制代码

运行结果：

image.png

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

演示代码：

<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>

复制代码

运行结果：

image.png

对象更新检测

由于 JavaScript 的限制，vue 不能检测对象属性的添加和删除。要解决这个问题，可以使用 vue 全局的 set()和 delete()方法来添加和删除属性，或者 vue 实例的 set()和 set()和 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>

复制代码

运行结果：

image.png

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>

复制代码

运行结果：

image.png

发布于: 刚刚阅读数: 3

小恺

关注

还未添加个人签名 2021.02.22 加入

还未添加个人简介

发布

暂无评论

创作场景

vue 指令 -3

遍历对象

对象更新检测

key 属性

小恺

评论