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

Posted 2021-06-02 Y字仇杀队

   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>