众所周知，任何程序都离不开循环，条件，和分支。而列表渲染正是循环的体现，这也是vue复杂应用的基础。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>List rendering</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <h4>v-for</h4> <form id="i"> <div v-for="(item,index) in items"> <label v-text="'input-type='+item.type+':'"></label> <input :type="item.type" v-if="item.type==='button'" @click="gps(item.action)" value="" name="" id="" v-model="item.type"> <input :type="item.type" value="" name="" v-model="item.type" v-else> </div> </form> <script> new Vue({ el: '#i', data: { items: [ {type: 'button', action: 'gps'}, {type: 'button', action: 'photo'}, {type: 'button', action: ''}, {type: 'checkbox'}, {type: 'color'}, {type: 'date'}, {type: 'datetime'}, {type: 'datetime-local'}, {type: 'email '}, {type: 'file '}, {type: 'hidden'}, {type: 'image'}, {type: 'month'}, {type: 'number '}, {type: 'password '}, {type: 'radio'}, {type: 'range'}, {type: 'reset'}, {type: 'search'}, {type: 'submit'}, {type: 'tel'}, {type: 'text '}, {type: 'time '}, {type: 'url '}, {type: 'week '}, ] }, methods: { gps: function (a) { switch (a) { case 'gps': { alert('gps'); break; } case 'photo': { alert('photo'); break; } default: { alert('default'); break; } } }, photo: function () { alert('photo') } } }) </script> <p>We can use the v-for directive to render a list of items based on an array. The v-for directive requires a special syntax in the form of item in items, where items is the source data array and item is an alias for the array element being iterated on</p> <ul id="example-1"> <li v-for="item in items"> {{ item.message }} </li> <script> var example1 = new Vue({ el: '#example-1', data: { items: [ {message: 'Foo'}, {message: 'Bar'} ] } }) </script> </ul> <ul id="example-2"> <li v-for="(item, index) in items"> {{ parentMessage }} -{{item}}-{{ index }} - {{ item.message }} </li> <script> var example2 = new Vue({ el: '#example-2', data: { parentMessage: 'Parent', items: [ {message: 'Foo'}, {message: 'Bar'} ] } }) </script> </ul> <h4>Template v-for</h4> <ul id="example-30"> <template v-for="item in items"> <li>{{ item.message }}</li> </template> <script> var example30 = new Vue({ el: '#example-30', data: { items: [ {message: 'Foo'}, {message: 'Bar'} ] } }) </script> </ul> <h4>Object v-for</h4> <p>You can also use v-for to <b>iterate-through(遍历)</b> the properties of an object.</p> <ul id="repeat-object" class="demo"> <div v-for="(value, key, index) in object"> {{ index }}. {{ key }} : {{ value }} </div> <script> new Vue({ el: '#repeat-object', data: { object: { FirstName: 'John', LastName: 'Doe', Age: 30 } } }) </script> </ul> <h4>Range v-for</h4> <ul id="test"> <li v-for="n in 5">{{ n }}</li> <script> let vm = new Vue({ el: '#test', data: {} }) </script> </ul> <h4><mark>Components and v-for</mark></h4> <ol class="see"> <my-component v-for="item in items" :item="item"> </my-component> </ol> <script> Vue.component('my-component',{ template:`<li v-if="item!='hello'">{{item}}</li>`, props:['item'] }); new Vue({ el:'.see', data:{ items:['hello','v-for','component'] } })
</script>
<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>
<script>
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 = ''
}
}
})
</script>
</div>
<h4>key---就地复用???</h4>
<div id="vm1">
<li v-for="item in items" :key="item.id">{{item.msg}}</li>
<li v-for="(key,item) in items" :key="key">{{item.key}}</li>
<script>
let vm1 = new Vue({
el: '#vm1',
data: {
items: [
{msg: 'hello'},
{msg: 'hello1'},
{msg: 'hello2'}
]
}
})
</script>
</div>
<h4>Array Change Detection</h4>
<div id="vm2">
<ol>
<li v-for="item in items" v-text="item.msg"></li>
</ol>
<script>
let vm2 = new Vue({
el: '#vm2',
data: {
items: [
{msg: 'push()'},
{msg: 'pop()'},
{msg: 'shift()'},
{msg: 'unshift()'},
{msg: 'splice()'},
{msg: 'sort()'},
{msg: 'reverse()'}
]
}
});
// 过滤
vm2.items = vm2.items.filter(function (item) {
return item.msg.match(/sort()/)
})
</script>
</div>
<h4>Replacing an Array</h4>
<h4>Caveats</h4>
<p>
Due to limitations in JavaScript, Vue cannot detect the following changes to an array:
When you directly set an item with the index, e.g. vm.items[indexOfItem] = newValue
When you modify the length of the array, e.g. vm.items.length = newLength
To overcome caveat 1, both of the following will accomplish the same as vm.items[indexOfItem] = newValue, but will
also trigger state updates in the reactivity system:
<mark>由于 JavaScript 的限制， Vue 不能检测以下变动的数组：
当你直接设置一个项的索引时，例如： vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如： vm.items.length = newLength</mark>
<script>
// Vue.set
Vue.set(example1.items, indexOfItem, newValue)
// Array.prototype.splice`
example1.items.splice(indexOfItem, 1, newValue)
example1.items.splice(newLength);//替代上个例子用法
</script>
</p>
<h4>Displaying Filtered/Sorted Results</h4>
<ul id="vm3">
<li v-for="n in evenNumbers">{{ n }}</li>
<input v-on:keyup.13="submit">
<input v-on:keyup.enter="submit">
<input @keyup.esc="submit">
<script>
let vm3 = new Vue({
el: '#vm3',
data: {
numbers: [1, 2, 3, 4, 5]
},
computed: {
evenNumbers: function () {
return this.numbers.filter(function (number) {
return number % 2 === 0
})
}
},
methods: {
submit: function () {
alert('submitted!');
}
}
});
</script></ul>
<h4>Key Modifiers</h4>
</body>
</html>