手记

Vue2.0文档学习及案例总结之----List Rendering

Vue2.0文档学习及案例总结之----List Rendering

众所周知,任何程序都离不开循环,条件,和分支。而列表渲染正是循环的体现,这也是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>

3人推荐
随时随地看视频
慕课网APP