vue.js循环for（列表渲染）详解

时间：2022-07-29 22:45:32

vue.js循环for（列表渲染）详解

一、总结

一句话总结：

v-for
<ul id="example-1">

  <li v-for="item in items">

    {{ item.message }}

  </li>

</ul>
var example1 = new Vue({

  el: '#example-1',

  data: {

    items: [

      { message: 'Foo' },

      { message: 'Bar' }

    ]

  }

})

1、vue.js中的循环结构（列表渲染:for）如何使用？

v-for

用于循环的数组里面的值可以是对象，也可以是普通元素

v-for

可以使用 v-for 指令基于一个数组渲染一个列表。这个指令使用特殊的语法，形式为 item in items，items 是数据数组，item 是当前数组元素的别名：

示例：

<ul id="example-1">

  <li v-for="item in items">

    {{ item.message }}

  </li>

</ul>
var example1 = new Vue({

  el: '#example-1',

  data: {

    items: [

      { message: 'Foo' },

      { message: 'Bar' }

    ]

  }

})

结果：

{% raw %}

  • {{item.message}}

{% endraw %}

详细示例：

 <!DOCTYPE html>

 <html lang="en">

 <head>

 <meta charset="UTF-8">

 <title>v-for</title>

 <link rel="stylesheet" type="text/css" href="css/style.css">

 <script type="text/javascript" src="js/vue.js"></script>

 <script type="text/javascript">

 window.onload = function() {

     var dataList = {

         innerText: [ '大家好', '欢迎来到麦子学院！' ]

     };

     new Vue({

         el: 'div',

         data: dataList

     });

 };

 </script>

 </head>

 <body>

 <div class="head face">

22     <span v-for="text in innerText">{{ text }}</span>

 </div>

 </body>

 </html>

2、vue.js中的循环结构（列表渲染:for）对普通的for循环的增强有哪些？

$index

在 v-for 块内我们能完全访问父组件作用域内的属性，另有一个特殊变量 $index，正如你猜到的，它是当前数组元素的索引：

<ul id="example-2">

  <li v-for="item in items">

    {{ parentMessage }} - {{ $index }} - {{ item.message }}

  </li>

</ul>
var example2 = new Vue({

  el: '#example-2',

  data: {

    parentMessage: 'Parent',

    items: [

      { message: 'Foo' },

      { message: 'Bar' }

    ]

  }

})

结果：

{% raw%}

  • {{ parentMessage }} - {{ $index }} - {{ item.message }}

{% endraw %}

另外，你可以为索引指定一个别名（如果 v-for 用于一个对象，则可以为对象的键指定一个别名）：

<div v-for="(index, item) in items">

  {{ index }} {{ item.message }}

</div>

3、vue.js中想用循环结构，但是不想给循环出来的东西添加标签，如何操作？

template v-for

类似于 template v-if，也可以将 v-for 用在 <template> 标签上，以渲染一个包含多个元素的块。例如：

<ul>

  <template v-for="item in items">

    <li>{{ item.msg }}</li>

    <li class="divider"></li>

  </template>

</ul>

4、vue.js的循环中，如何动态改变数据源数组里面的内容？

数组变动检测 变异方法

Vue.js 包装了被观察数组的变异方法，故它们能触发视图更新。被包装的方法有：

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

你可以打开浏览器的控制台，用这些方法修改上例的 items 数组。例如：example1.items.push({ message: 'Baz' })。

5、vue.js的列表渲染中，修改数据源数组的方法和不修改数据源数组的方法分别有哪些？

变异方法 替换数组

变异方法

Vue.js 包装了被观察数组的变异方法，故它们能触发视图更新。被包装的方法有：

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

你可以打开浏览器的控制台，用这些方法修改上例的 items 数组。例如：example1.items.push({ message: 'Baz' })。

替换数组

变异方法，如名字所示，修改了原始数组。相比之下，也有非变异方法，如 filter(), concat() 和 slice()，不会修改原始数组而是返回一个新数组。在使用非变异方法时，可以直接用新数组替换旧数组：

example1.items = example1.items.filter(function (item) {

  return item.message.match(/Foo/)

})

可能你觉得这将导致 Vue.js 弃用已有 DOM 并重新渲染整个列表——幸运的是并非如此。 Vue.js 实现了一些启发算法，以最大化复用 DOM 元素，因而用另一个数组替换数组是一个非常高效的操作。

6、vue.js的列表渲染中，遍历对象和遍历数组有什么区别？

$key

也可以使用 v-for 遍历对象。除了 $index 之外，作用域内还可以访问另外一个特殊变量 $key。

<ul id="repeat-object" class="demo">

  <li v-for="value in object">

    {{ $key }} : {{ value }}

  </li>

</ul>
new Vue({

  el: '#repeat-object',

  data: {

    object: {

      FirstName: 'John',

      LastName: 'Doe',

      Age: 30

    }

  }

})

结果：

{% raw %}

  • {{ $key }} : {{ value }}

{% endraw %}

也可以给对象的键提供一个别名：

<div v-for="(key, val) in object">

  {{ key }} {{ val }}

</div>

在遍历对象时，是按 `Object.keys()` 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下是一致的。

7、vue.js的列表循环中如何循环打印整数（比如1-100）（比如将某内容重复多少遍）？

值域 v-for

v-for 也可以接收一个整数，此时它将重复模板数次。

<div>

  <span v-for="n in 10">{{ n }} </span>

</div>

结果：

{% raw %}

{{ n }}

{% endraw %}

二、内容在总结中

参考：vue 列表渲染_w3cschool
https://www.w3cschool.cn/aekdgs/mjag7dn1.html

如需更加详细，参考vue的手册即可

 

相关文章