v-for 遍历

最新推荐文章于 2024-07-18 18:59:22 发布

qiphon3650

最新推荐文章于 2024-07-18 18:59:22 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： v-for

本文链接：https://blog.youkuaiyun.com/qiphon3650/article/details/73380128

Vue 专栏收录该内容

44 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
		<title>vue</title>
		<script src="vue.js"></script>
		
    </head>
    <body>
    	<div id="test">{{msg}}
			<p v-for="val in arr">
				{{val.a}} 
			</p>
			
    	</div>
    </body>
</html>
<script>
	// window.οnlοad= function(){
		var app2 = new Vue ({
			el:"#test",
			data:{
				msg:'润元装饰',
				msg1:"家装"+new Date(),
				msg2:'lianxi',
				show:true,
				arr:[
					{a:'bb'},
					{a:'cc'}
				]
			},
			mothods:{

			}
		})
	// }
</script>

在控制台里，输入 app4.todos.push({ text: '新项目' })，你会发现列表中添加了一个新项。

`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' }
    ]
  }
})

结果：Foo bar

在 v-for 块中，我们拥有对父作用域属性的完全访问权限。 v-for 还支持一个可选的第二个参数为当前项的索引。

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>
var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

结果： Parent - 0 - Foo

Parent - 1 - Bar
你也可以用 of 替代 in 作为分隔符，因为它是最接近 JavaScript 迭代器的语法

Template v-for

如同 v-if 模板，你也可以用带有 v-for 的 <template> 标签来渲染多个元素块。例如：

<ul>
  <template v-for="（item,index）of items">
    <li>{{ item.msg }}</li>
    <li class="divider">{{index}}</li>
  </template>
</ul>

对象迭代 v-for

你也可以用 v-for 通过一个对象的属性来迭代。

<ul id="repeat-object" class="demo">
  <li v-for="(value,key,index) in object">
    {{ value }} {{key}}  {{index}}
  </li>
</ul>
new Vue({
  el: '#repeat-object',
  data: {
    object: {
      FirstName: 'John',
      LastName: 'Doe',
      Age: 30
    }
  }
})

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

整数迭代 v-for

v-for 也可以取整数。在这种情况下，它将重复多次模板。

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

结果：1 2 3 4 5 6 7 8 9 10

组件和 v-for

在自定义组件里，你可以像任何普通元素一样用 v-for 。

<my-component v-for="item in items" :key="item.id"></my-component>

2.2.0+的版本里，当在组件中使用 v-for 时， key 现在是必须的。

然而他不能自动传递数据到组件里，因为组件有自己独立的作用域。为了传递迭代数据到组件里，我们要用 props ：

<my-component
  v-for="(item, index) in items"
  v-bind:item="item"
  v-bind:index="index"
  v-bind:key="item.id">
</my-component>

不自动注入 item 到组件里的原因是，因为这使得组件会紧密耦合到 v-for 如何运作。在一些情况下，明确数据的来源可以使组件可重用。

下面是一个简单的 todo list 完整的例子：

<div id="todo-list-example">
  <input
    v-model="newTodoText"
    v-on:keyup.enter="addNewTodo"
    placeholder="Add a todo"
  >
  <ul>
    <li
      is="todo-item"
      v-for="(todo, index) in todos"
      v-bind:title="todo"
      v-on:remove="todos.splice(index, 1)"
    ></li>
  </ul>
</div>
Vue.component('todo-item', {
  template: `
    <li>
      {{ title }}
      <button v-on:click="$emit('remove')">X</button>
    </li>
  `,
  props: ['title']
})
new Vue({
  el: '#todo-list-example',
  data: {
    newTodoText: '',
    todos: [
      'Do the dishes',
      'Take out the trash',
      'Mow the lawn'
    ]
  },
  methods: {
    addNewTodo: function () {
      this.todos.push(this.newTodoText)
      this.newTodoText = ''
    }
  }
})