Vue-HolderJS

Example of usage

by boogermann

HTML

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<script src="https://unpkg.com/vue-holderjs"></script>
<div id="demo">
<!-- using without parameters (defaults to a 100% by 100% image to fill the container) -->
    <div style="width:400px;height:100px">
      <img v-holder>
    </div>
    <!-- using object from the data object -->
    <img v-holder="holder">
    <!-- using string -->
    <img v-holder="'img=100px200?auto=yes&theme=social&text=Full width'">
    <!-- using object -->
    <img v-holder="{img:'150x150',theme: 'github', text:'150 Fixed!'}">
</div>

JavaScript

var demo = new Vue({
	el: '#demo',
	data: {
		holder: {
			img: '200x200',
			auto: 'yes',
			theme: 'vue',
      text: 'Vue + HolderJS'
		}
	}
});