如何根据视口更改 vue.js 指令？

Question

我有一个带有v-rellax 指令的元素，用于在此div 中启用视差滚动：

<div id="image" v-rellax="{ speed: -5 }"></div>

现在我需要将speed 属性更改为-3 以使其适应不同的screen width。有没有办法改变speed：

1. in a `media query`
2. in `vue.js`
3. in `javascript`

vue 有没有一种简单的方法来做到这一点？

编辑：

我已尝试实施提供的解决方案，但视差滚动停止工作。我做错了吗？

<script>
export default {
  name: "home",
  data: { rellax_speed: -5 },
  created() {
    window.addEventListener('resize', (event) => {
      if (event.target.innerWidth >= 576) {
        this.rellax_speed = -3;
        return;
      }
      this.rellax_speed = -5;
    })
  }
}
</script>

模板：

<div id="image" v-rellax="{ speed: rellax_speed }"></div>

编辑2：

<script>
export default {
  name: "home",
  data() {
    return {
      r_speed: -5
    }
  },
  methods: {
    onresize(event) {
      if (event.target.innerWidth >= 576) {
        this.r_speed = -3;
        return;
      }
      this.r_speed = -5
    }
  },
  created() {
    window.addEventListener("resize", this.onresize)
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.onresize, true)
  }
}
</script>

模板：

<div id="image" v-rellax="{ speed: r_speed }"></div>

Answer 1

好的，相信能理解你。

编辑：

谢谢你 tony19 :)

在数据中创建 vrelaxSpeed。初始值：-5，在你的指令中使用它。

data() {
   return { 
      vrellaxSpeed: -5
   }
},
methods:{
   onResize(event) {
      if (event.target.innerWidth > 1280) {
        this.vrellaxSpeed = -3;
        return;
      }
      this.vrellaxSpeed = -5;
   }
},
created() {
   window.addEventListener('resize', this.onResize)
},
beforeDestroy() {
   window.removeEventListener('resize', this.onResize, true);
}

---

在你的 vue 组件中创建一个computed。

computed: {
   getVrellaxSpeed() {
      return window.innerWidth > 1280 ? -3 : -5;
   }
}

然后，在你的指令属性中使用它。

<div id="image" v-rellax="{ speed: getVrellaxSpeed }"></div>

我没有测试过，请试试这个并给我反馈以帮助你:)