vue——v-for指令

news/2024/7/10 2:13:05 标签: vue

在v-for中使用数组

用法：(item, index) in items
index为数组下标

<ul id="app">
  <li v-for="(person, index) in persons">
    {{ index }}---{{ person.name }}---{{ person.age }}
  </li>
</ul>

const vm = new Vue({
  el: '#app',
  data: {
    persons: [
      { name: '张三', age: 18 },
      { name: '李四', age: 28 },
      { name: '王五', age: 22 },
      { name: '赵六', age: 18 },
    ]
  }
})

在这里插入图片描述

可以利用of替代in作为分隔符，因为它更接近迭代器的语法：

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

在v-for中使用对象

用法：(value, key, index) in Object
参数：value: 对象值
key：可选，键名
index：可选，索引

<ul id="app">
  <li v-for="(value, key, index) in hu">
    {{ value }}
  </li>
</ul>

const vm = new Vue({
  el: '#app',
  data: {
    hu: {
      name: '张三',
      age: 30,
      height: '163cm'
    }
  }
})

在这里插入图片描述

在v-for中使用数字

用法：n in num
参数：n: 数字，从1开始

<div id="app">
  <span v-for="n in num">{{ n }} </span>
</div>

const vm = new Vue({
  el: '#app',
  data: {
    num: 10
  }
})

在这里插入图片描述

使用字符串

用法：str in string
参数：str: 字符串，源数据字符串中的每一个

<div id="app">
  <span v-for="str in string">{{ str }} </span>
</div>

const vm = new Vue({
  el: '#app',
  data: {
    string: 'woainizhongguo'
  }
})

打印：
在这里插入图片描述

循环一段包含多个元素的内容

可以利用template元素循环渲染一段包含多个元素的内容

<ul id="app">
  <template v-for="person in persons">
    <li>{{ item.msg }}</li>
    <li>哈哈</li>
  </template>
</ul>

const vm = new Vue({
  el: '#app',
  data: {
    persons: ['hc', 'czl', 'xsh', 'lyy','ly','mgy']
  }
})

在这里插入图片描述

关于key

Vue更新使用v-for渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是从新渲染标签内部的值：

<ul id="app">
  <li v-for="(person, index) in persons">
    {{ person }}
    <input type="text" />
    <button @click="handleClick(index)">下移</button>
  </li>
</ul>

const vm = new Vue({
  el: '#app',
  data: {
    persons: ['hc', 'czl', 'xsh', 'lyy','ly','mgy']
  },
  methods: {
    handleClick (index) {
      const deleteItem = this.persons.splice(index, 1);
      //splice函数用于排列数组内的元素
      this.persons.splice(index + 1, 0, ...deleteItem);
    }
  }
})