Javascript Vue中的颜色选择器

如何在Vue.js中执行？我不想使用任何组件，可以在纯Vue.js中完成吗

我只想在单击按钮后得到示例中的内容。只是一个调色板和不透明度设置

实际代码：

<!-- Input -->
<input type="text" v-model="color.navigation.background" maxlenght="7" placeholder="#000000">
<!-- Default color -->
<input type="button" @click="color.navigation.background = '#00CED1'">
<!-- Change color button -->
<input type="color" v-model="color.navigation.background">

var app = new Vue({
   el: '#app',
   data: {
    // Colors
    color: {
        // Navigation
        navigation: {
            background: '#00CED1'
        }
    }
}

var app=新的Vue({
el:“#应用程序”，
数据：{
//颜色
颜色：{
//航行
导航：{
背景：“#00CED1”
}
}
}

})

由于type=“color”无法准确显示我想要的内容，因此单击“确定”后颜色会发生变化。接下来，我想从输入的十六进制值中删除#

谢谢