4.Vue学习：data对象和for循环src路径绑定

   data是一个对象：

<script>
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {}
    });
</script>

1、for循环：

①、循环普通数组：

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            list: [1, 2, 3]
        },
        methods: {}
    });
</script>

<div id="app">
    <p v-for="(item, index) in list">每一项值{{item}}---索引值为{{index}}</p>
</div>

　　

②、循环对象数组：

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            list: [
                {id: 1, name: 'zs1'},
                {id: 2, name: 'zs2'}
            ]
        },
        methods: {}
    });
</script>

<div id="app">
    <p v-for="(user, i) in list">id为{{user.id}}---name为{{user.name}}--索引值为{{i}}</p>
</div>

　　

③、循环对象：

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            user: {
                id: 1,
                name: 'zs',
                gender: 'male'
            }
        },
        methods: {}
    });
</script>

<div id="app">
    <p v-for="(val, key, i) in user">值是{{val}}---键是{{key}}--索引值为{{i}}</p>
</div>

　　

2、for循环src路径绑定：

①、要使用v-bind。

②、不要花括号。

                <tbody id="tbody">
                    <tr v-for='(item,index) in heroMsg'>
                        <td>{{item.heroName}}</td>
                        <td>{{item.heroSkill}}</td>
                        <td>
                            <img :src="item.heroIcon" alt="">
                        </td>
                        <td>
                            <button class="btn btn-success" style="background-color: #55a859;"
                                id="{{$index}}">编辑</button>
                            <button class="btn btn-danger" style="background-color: #690808;">删除</button>
                        </td>
                    </tr>
                </tbody>