使用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查看更多詳細信息。