vue列表渲染

当model里面有多个数据需要再view中显示是，可以使用v-for指令来进行操作

可以使用v-for指令基于一个数组来渲染一个列表，v-for指令需要使用item in items形式的特殊语法

其中items是源数据数组，而item是被迭代的数组元素的别名

语法：<开始标签 v-for="自定义名称 in/of 数组/对象"></结束标签>

需求：通过无序列表展示商品数据

思路：需要给li标签加上v-for，使该标签可以遍历

    <div id="app">
        <ul>
            <li v-for="goodName in goodsList">{{goodName}}</li> #遍历数组时，v-for放入li标签中
        </ul>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        let vm = new Vue({
            el : "#app",
            data : {
                //定义数组数据
                goodsList:['小米','oppo','华为','apple','三星']
            }
        })
    </script>

 还可以遍历加索引

        <h3>遍历加索引</h3>
        <ul>
            <li v-for="(goodName,index) in goodsList">第{{index+1}}个商品名称是{{goodName}}</li>
        </ul>

 另外：v-for渲染出来的列表，有时候会要求有删除按钮。删除后页面上对应的一行数据也会不见了。

在vue中这个数据通过splice来实现。

#index表示要删除的记录对应在userList中索引只，1，表示只删除一条记录
this.userList.splice(index,1)

这个比JavaScript好用很多，完全不需要再操作dom元素。