<!DOCTYPE html>
<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 () {
$('#mycp').colorpicker({});
});
var vm = new Vue({
el: "#app",
data:{
bgColor:"rgba(10,10,10,0.5)",
}
})
</script>
</body>
最后结果图就是这样
update方法需要调用,你可以用computed或者watch来实现
左上角是input,当通过js改变他的值时,data数据并没有改变,这是因为直接操作了dom
