2-Way Data Binding in VueJs

A simple demo of 2-way data binding in VueJs - http://coligo.io

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<div class="main" id="vue-instance">
  <!-- this will be the DOM element we will mount our VueJs instance to -->
  Enter an image url:
  <input type="text" v-model="myimage">

<img class="insert" style="max-height:300px" v-show="myimage" v-bind:src="myimage + 'home.jpg'">

<p>
Test URL is http://www.dixonscarphone.com/~/media/Images/D/Dixons-Carphone/logo/dixons-logo.png</p><p> that would end up as</p><p>http://www.dixonscarphone.com/~/media/Images/D/Dixons-Carphone/logo/home.jpg
</p>
</div>

CSS

.main {
  position:relative;
  height:300px;
  width:300px;
}

.insert {
  height:150px;
  width:150px;
}

JavaScript

var vm = new Vue({
      el: '#vue-instance',
      data: {
        myimage: ''
      }
    });
    
/* Regex to add is [^\/]+$ */

/* Test URL is http://www.dixonscarphone.com/~/media/Images/D/Dixons-Carphone/logo/dixons-logo.png that would end up as http://www.dixonscarphone.com/~/media/Images/D/Dixons-Carphone/logo/home.jpg*/