< html lang= "en" >
< head >
<meta charset="utf-8">
<link href="colorpicker/bootstrap-colorpicker.min.css" rel="stylesheet">
<script src="vue.js"></script> < / head >
< body >
< div class= "container" id= "app" >
<div id="mycp" class="input-group colorpicker-component">
<input type="text" class="form-control" v-model="bgColor"/>
<span class="input-group-addon"><i></i></span>
{{bgColor}}
</div> < / div >
< script src= "jquery-2.2.3.min.js" > < / script >
< script src= "colorpicker/bootstrap-colorpicker.js" > < / script >
< script >
$(function () {
$("-sharpmycp").colorpicker({});
});
var vm = new Vue({
el: "-sharpapp",
data:{
bgColor:"rgba(10,10,10,0.5)",
}
}) < / script >
< / body >
this is the final result
