Question

我是Vue.js的初学者。我有一个Vue.js脚本，该脚本存储一些数据以便将其放入表中。我可以将其放在表格中，但是我无法弄清楚如何在表格的行中交替显示颜色（我只需要在表格中放入'class =“ table-light”'）即可。

我尝试做类似“ var i = 0;”的事情然后我想做类似的事情：if（i％2 == 0）{print''; }其他{...} 但这到目前为止还行不通，因为我认为没有任何函数可以打印某些内容，而且我什至无法使变量递增。如果有人可以帮助我解决这个问题...

//Where I store the data
var demo = new Vue({
    el: '#demo',
    data: {
        searchQuery: '',
        gridColumns: ['nom', 'description', 'url'],
        gridData: [
            { nom: 'test', description: 'test', url: 'test' },
            { nom: 'test', description: 'test', url: 'test' },
            { nom: 'test', description: 'test', url: 'test' }
        ]
    }
})






<script type="text/x-template" id="grid-template">

    var i = 0;

    <table class="table table-hover">
        <thead>
            <tr class="table-title">
                <th v-for="key in columns"
                    @click="sortBy(key)"
                    :class="{ active: sortKey == key }">
                    {{ key | capitalize }}
                    <span class="arrow" :class="sortOrders[key] > 0 ? 'asc' : 'dsc'">
                    </span>
                </th>
            </tr>
        </thead>

        <tbody>

            <template v-for="entry in filteredHeroes">
 //-----------------------------------------------------------------
            //Where I'm supposed to add class="table-light"

                <tr>
//-----------------------------------------------------------------

                    <th scope="row"> {{entry['nom']}} </th>
                        <td> {{entry['description']}} </td>
                        <td>{{entry['url']}} <a v-bind:href="entry['url']" class="ni ni-curved-next pull-right"></a></td>
                </tr>
            </template>
        </tbody>
    </table>
</script>

Answer 1

将索引添加到v-for

<template v-for="(entry, index) in filteredHeroes">
    <tr :class="{'table-light': index % 2}">

用Vue.js初始化的HTML表：如何替换行颜色

1 个答案: