input:type="color" input事件
效果
一、需求
项目需求是更改颜色后立即生效,但是之前使用的是change事件不能立即生效,需要再次点击input才生效,因此后面改为了input事件来解决这一问题。
二、示例
<template>
<div>
<input type="color" v-model="color" @input="refreshColor($event)" />
<span :style="{color: color}">{{ color }}</span>
</div>
</template>
<script>
export default {
data() {
return {
color: '#ff0000',
},
},
methods: {
refreshColor(event) {
console.log(event.target.value);
},
}
};
</script>