Vue图片加载更优雅。 使用自定义指令，图片没加载之前用随机颜色代替。加载完成后再显示图片。

<div id="app" v-image = "item " v-for="item in imageList"></div>
<script>
Vue.directive("image", {
    inserted: function(el，binding){
         var color = Math.floor(Math,random()*1000000)
         el.style.backgroundColor = "#" + color
         var img = new Image()
         img.src = binding.vaule
         img.onload = function(){ 
           el.style.backgroundImage =  “url(” + binding.vaule + ")"
         }
     }
 })
 new Vue({
        el: "#app",
        data: {
            imageList: [
                {
                    url: "http://consumer-img.huawei.com/content/dam/huawei-cbg-site/greate-china/cn/mkt/homepage/section4/home-s4-p10-plus.jpg"
                },
                {
                    url: "http://consumer-img.huawei.com/content/dam/huawei-cbg-site/greate-china/cn/mkt/homepage/section4/home-s4-watch2-pro-banner.jpg"
                },
                {
                    url: "http://consumer-img.huawei.com/content/dam/huawei-cbg-site/en/mkt/homepage/section4/home-s4-matebook-x.jpg"
                }
            ]
        }
    })
 </script>