Vue8.列表渲染

---

v-for把一个数组对应为一组元素

<h2>v-for把一个数组对应为一组元素</h2>
    <p>我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。在v-for中也可以使用of替代in作为分隔符,因为它更接近js迭代器的语法</p>
    <div id="app1">
        <ul id="example-1">
            <li v-for="item in items" :key="item.message">
                {{ item.message }}
            </li>
        </ul>
    </div>
    <script>
        var app1 = new Vue({
            el:"#app1",
            data: {
                items: [
                    {message:'Foo'},
                    {message:'Bar'}
                ]
            }
        });
    </script>

---

v-for中还支持一个可选参数index

<h2>v-for中还支持一个可选参数index</h2>
    <div id="app2">
        <ul id="example-2">
            <li v-for="(item, index) in items">
               {{ parentMessage }} - {{ index }} - {{ item.message }}
            </li>
        </ul>
    </div>
    <script>
        var app2 = new Vue({
            el: '#app2',
            data:{
                parentMessage: 'Parent',
                items: [
                    {message:'Foo'},
                    {message:'Bar'}
                ]
            }
        });
    </script>

---

在v-for使用对象

<h2>在v-for使用对象</h2>
    <div id="app3">
        <ul id="v-for-object" class="demo">
            <li v-for="value in object">
                {{ value }}
            </li>
        </ul>
    </div>
    <script>
        var app3 = new Vue({
           el:"#app3",
           data: {
               object: {
                   title: 'How to do lists in Vue',
                   author: 'Jane Doe',
                   publishedAt: '2016-04-10'
               }
           }
        });
    </script>

---

v-for中使用对象也可以获取键名和index两个均为可选参数,且顺序是,值,键,index

<h2>v-for中使用对象也可以获取键名和index两个均为可选参数,且顺序是,值,键,index</h2>
    <div id="app4">
        <ul class="demo">
            <li v-for="(val, key, index) in object">
                {{ index }} = > {{ key }} => {{ val }}
            </li>
        </ul>
    </div>
    <script>
        var app4 = new Vue({
            el:"#app4",
            data: {
                object: {
                    title: 'How to do lists in Vue',
                    author: 'Jane Doe',
                    publishedAt: '2016-04-10'
                }
            }
        });
    </script>

---

数组操作,增删改查

<h2>数组操作,增删改查</h2>
    <h2>变更方法,会变更调用这些方法的原始数组</h2>
    <p>push pop shift unshift splice sort reverse 这些方法</p>
    <h2>替换数组</h2>
    <p>非变更方法,不会变更原始数组,总会返回一个新数组</p>
    <p>filter()、concat() 和 slice()</p>
    <h2>显示过滤/排序后的结果</h2>
    <p>有时,我们想要显示一个数组经过过滤或排序后的版本,不变更或重置原始数据,可以创建一个计算属性,来返回过滤或排序后的数组</p>
    <div id="app5">
        <li v-for="n in evenNumbers">{{ n }}</li>
    </div>
    <script>
        var app5 = new Vue({
            el: '#app5',
            data: {
                numbers: [1,2,3,4,5]
            },
            computed: {
                evenNumbers: function () {
                    return this.numbers.filter(function (number) {
                        return number % 2 === 0;
                    });
                }
            }
        });
    </script>
    <p>在计算属性不适用的情况下(例如v-for循环中),可以使用方法</p>
    <div id="app6">
        <ul v-for="set in sets">
            <li v-for="n in even(set)">{{ n }}</li>
        </ul>
    </div>
    <script>
        var app6 = new Vue({
            el: "#app6",
            data: {
                sets: [[1,2,3,4,5], [6,7,8,9,10]]
            },
            methods: {
                even: function (numbers) {
                    return numbers.filter(function (number) {
                        return number % 2 === 0;
                    });
                }
            }
        });
    </script>
    <hr>

---

在v-for里使用值范围

<h2>在v-for里使用值范围</h2>
    <div id="app7">
        <span v-for="n in 10">{{ n }}</span>
    </div>
    <script>
        var app7 = new Vue({
            el: "#app7",
            data: {

            }
        });
    </script>

---

v-for在模板中使用

<h2>v-for在模板中使用</h2>
    <ul id="app8">
        <template v-for="item in items">
            <li>{{ item.msg }}</li>
            <li class="divider" role="presentation"></li>
        </template>
    </ul>
    <script>
        var app8 = new Vue({
            el: '#app8',
            data: {
                items: [{msg: 'tom'}, {msg: 'jerry'}, {msg: 'lily'}]
            }
        });
    </script>

---

在组件上使用v-for

<h2>在组件上使用v-for</h2>
    <p>在自定义组件上,你可以像在任何普通元素上一样使用v-for</p>
    <div id="todo-list-example">
        <form v-on:submit.prevent="addNewTodo">
            <label for="new-todo">Add a todo</label>
            <input
                    v-model="newTodoText"
                    id="new-todo"
                    placeholder="E.g. Feed the cat"
            >
            <button>Add</button>
        </form>
        <ul>
            <li
                    is="todo-item"
                    v-for="(todo, index) in todos"
                    v-bind:key="todo.id"
                    v-bind:title="todo.title"
                    v-on:remove="todos.splice(index, 1)"
            ></li>
        </ul>
    </div>
    <script>
        Vue.component('todo-item', {
            template: '\
    <li>\
      {{ title }}\
      <button v-on:click="$emit(\'remove\')">Remove</button>\
    </li>\
  ',
            props: ['title']
        })

        new Vue({
            el: '#todo-list-example',
            data: {
                newTodoText: '',
                todos: [
                    {
                        id: 1,
                        title: 'Do the dishes',
                    },
                    {
                        id: 2,
                        title: 'Take out the trash',
                    },
                    {
                        id: 3,
                        title: 'Mow the lawn'
                    }
                ],
                nextTodoId: 4
            },
            methods: {
                addNewTodo: function () {
                    this.todos.push({
                        id: this.nextTodoId++,
                        title: this.newTodoText
                    })
                    this.newTodoText = ''
                }
            }
        })
    </script>

---