时间戳

首页 > 解决方案 > 如何在不绑定的情况下获取容器元素的 HTML 标记并使用 VueJS 更改它的背景图像？

javascript - 如何在不绑定的情况下获取容器元素的 HTML 标记并使用 VueJS 更改它的背景图像？

问题描述

我是 VueJS 的新手。目前，我面临一些问题。在我的 Vue 项目中，我有一个 DIV，它在点击时触发一个函数：

<div
  class="product-thumbnails-image-container"
  data-lowsrc="{{asset('img/220x220.png')}}"
  style="background-image:url(img/products/thumb.jpg)"
  v-on:click="changeImage"
  data-lg-img="img/products/large.jpg"
  data-sm-img="img/products/image.jpg"
  data-thumb-img="img/products/thumb.jpg"
></div>

我的 VueJS 实例如下所示：

var app = new Vue({
  el: '#app',
  methods: {
    changeImage: function(evt) {
      if (evt) evt.preventDefault();
      // chage background image here
    }
  }
});

在 Vue 元素容器中，一个 HTML 元素在页面加载后由 jQuery 插件呈现。如下：

<div
  id="zoom_01-lens"
  class="magnifier-lens"
  style="width: 208px; height: 208px; background: url("http://127.0.0.1:8000/img/products/anotherImage.jpg") -155px -28px no-repeat scroll; left: 154px; top: 27px;"
></div>

由于它不存在于我的 HTML 文件中，因此我无法将其与数据模型绑定。那么，如何更改函数触发zoom_01-lens时的背景图像？changeImage()

标签： javascriptvue.jsvue-component

解决方案

Vue 可能无法很好地与 JQuery 插件配合使用。您的插件将与 DOM 交互，但 Vue 可以在它认为合适的任何时候覆盖 DOM 的任何部分，可能会破坏插件可能依赖的任何事件侦听器。你真的应该寻找一个 Vue 插件来完成你的 JQuery 插件所做的事情。

如果您想尝试让它们一起存在，请将您的changeImage()函数放在全局范围内，在 Vue 之外，它可以访问文档。然后从 Vue 调用它。这可能有效，但不是很干净。

推荐阅读