1、实现的具体效果演示

2、具体功能实现的相关代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>随机背景颜色</title>
<style>
div {
margin: auto;
width: 567px;
height: 567px;
}
</style>
</head>
<body>
<div id="app">
<div v-img="'../../images/apple.png'"></div>
</div>
<script src="../../plugings/vue.js"></script>
<script>
Vue.directive('img', {
inserted: function(el, binding) {
let color = Math.floor(Math.random() * 1000000);
el.style.backgroundColor = '#' + color;
let img = new Image();
img.src = binding.value;
img.onload = function() {
el.style.backgroundImage = 'url(' + binding.value + ')';
}
}
})
new Vue({
el: "#app"
})
</script>
</body>
</html>