VUE学习-列表渲染

列表渲染

v-for

<!-- v-for="(v,k,i) in arr/obj" -->

<ul id="app">
	<li v-for="item in items" :key="item.message">{{ item.msg }}</li>
</ul>
<script>
new Vue({
	el:'#app',
	data:{[
		{msg:'foo'},
		{msg:'bar'}
	]}
})
</script>

<div id="app" v-for="(v, k, i) in obj">{{ i }}. {{ k }}: {{ v }}</div>
<script>
new Vue({
	el:'#app',
	data:{
		obj:{name:'kimi',age:'18',sex:'man'}
	}
})
</script>

数组更新

1. 通过变更方法直接更新原数组

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

2. 通过用非变更方法获得的新数组替换原数组

   • filter(), concat(), slice()

注意：由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。

<script>
var vm = new Vue({
	el: '#app',
	data:{
		obj:{a:'1'},
		arr:['a','b','c']
	}
})
vm.obj.b = '2' //不是响应式
vm.arr[1] = 'd' //不是响应式
vm.arr.length = 4 //不是响应式
</script>

组件上使用v-for

这里的 is="todo-item" attribute。这种做法在使用 DOM 模板时是十分必要的，因为在 <ul> 元素内只有 <li> 元素会被看作有效内容。这样做实现的效果与 <todo-item> 相同，但是可以避开一些潜在的浏览器解析错误。

有些 HTML 元素，诸如 <ul>、<ol>、<table> 和 <select>，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如 <li>、<tr> 和 <option>，只能出现在其它某些特定的元素内部。有些 HTML 元素，诸如 <ul>、<ol>、<table> 和 <select>，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如 <li>、<tr> 和 <option>，只能出现在其它某些特定的元素内部。

<ul>
	<li is="todo-item" v-for="(v, i) in todos" v-bind:key="todo.id"v-bind:title="todo.title" v-on:remove="todos.splice(index, 1)"></li>
</ul>
<script>
Vue.component('todo-item', {
	template: '\<li>\{{ title }}\<button v-on:click="$emit(\'remove\')">Remove</button>\</li>\',
	props: ['title']
})
</script>