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。

中查看更多详情

使用Vue的指令更改Dom样式但不起作用

1 个答案: