Question

我的组件模板有一个img

<img src="img/loading.gif" :data-src="url" class="live-snapshot-img" :class="{lazy:true, 'lazy-loaded': false}">

渲染时，我会触发延迟事件。该类将从'lazy'变为'lazy-loaded'。

<img src="img/loading.gif" :data-src="url" class="live-snapshot-img lazy-loaded">

然后，如果数据发生了变化，我希望将类更改回“懒惰”。 bind：类不起作用。

Answer 1

我认为你是以一种错误的方式接近这一点。你有正确的想法，但我觉得你的想法和jQuery帖子渲染dom操纵方式，而不是这是坏的，只是不适合这种情况。 Vue的工作方式略有不同。如果要在此特定实例中更改事件后的类，请将：class绑定到vue组件中的变量。

如果我想要实现这一点，我可能会首先在状态的组件数据中设置变量。（见：Class and Style Bindings）

Vue.component('my-component-name', {
     data: function () {
          return {
               imageState: {'lazy': true, 'lazy-loaded': false}
          }
     }
})

然后将其绑定到您的元素：

<img src="img/loading.gif" :data-src="url" class="live-snapshot-img" :class="imageState">

然后，您可以以任何方式操作组件方法中的imageState。

Answer 2

我的解决方案是在组件

中创建方法

    lazyload: function() {
        var clazz = {lazy: true, 'lazy-loaded': false}
        clazz['dummy' + Math.random()] = true
        return clazz
    },

并将img更改为

<img src="img/loading.gif" :data-src="url" class="live-snapshot-img" :class="lazyload()">

vuejs：如何更改v-for中每个项目的类

2 个答案: