使用 Vue JS 定位 v-repeat 中的最后一项

Question

我有一个从 json 中提取的项目的 v-repeat 列表。

我想定位列表中的最后一项以更改其 class。

我该怎么做？我的代码如下...

HTML

<div id="app">
...
            <ul id="menu">
                <li v-repeat="items">
                    <i class="material-icons">{{ icon }}</i>
                    {{ name }}
                </li>
            </ul>
</div>

JS

var apiUrl = 'inc/menu.json.php'

new Vue({
    el: '#app',
    data: {
        active: true,
        items: []
    },
    ready: function(){
        this.fetchData()
    },
    methods: {
        toggle: function () {
            this.active = !this.active;
        },
        fetchData: function(){
            var xhr = new XMLHttpRequest(),
                self = this
            xhr.open('GET', apiUrl)
            xhr.onload = function () {
                self.items = JSON.parse(xhr.responseText)
            }
            xhr.send()
        }
    }
});

Answer 1

你只需要像这样添加 v-class

<li v-repeat="items" v-class="last : $index === (items.length-1)">
  <i class="material-icons">{{ icon }}</i>
    {{ name }}
</li>

其中 last 是您要添加的 class

Answer 2

对于 Vue 2.0，代码看起来略有不同：

<li v-for="(item, index) in items" v-bind:class="{last : index === (items.length-1)}">
  <i class="material-icons">{{ icon }}</i>
    {{ name }}
</li>

使用 Vue JS 定位 v-repeat 中的最后一项

Targeting last item in v-repeat with Vue JS

javascript

vue.js