javascript - 使用Vue的指令改变Dom样式但不起作用

Question

我正在尝试使用 Vue 构建我的应用程序，但图像加载速度存在问题。我写了一个指令来控制它:

 <div   style="width:1280px;height:800px;background-size:100% 100%"                   imgload="product.bgImg  ">
    <div class="backgroud" style="display: block" title="p1">
         <div>{{product.productTitle}}</div>
          <img src=""   style="border-style:none" />
          <div  is="tip-compont" class="tips" v-bind:position="product.tips"></div>
          <template   v-for="r of product.rect">
              <div  is="rect-compont" shape="rect"  v-bind:position="r"  v-on:click="update()" ></div>
           </template>
           <template v-for="c of product.circle">
                <div is="circle-compont" shape="circle" v-bind:position="c"></div>
            </template>
           </div>
        </div>
Vue.directive('imgload',{inserted:function (el,binding,vnode,oldno) {
    var img=new Image();
    img.src=binding.value;
    var sty='url('+binding.value+') no-repeat';
    el.style.background=sty;
}})

但似乎不起作用。图像未显示在我的屏幕上。

Answer 1

您必须在 HTML 中附加 v- 才能将其用作 Vue 指令，如下所示:

<div style="width:1280px;height:800px;background-size:100% 100%" v-imgload="product.bgImg">
...

您可以在documentation查看更多详情.