1,关于日期通常关注value的格式问题,组件使用value绑定还是使用v-model绑定在使用了on-change
事件的情况下是没有什么区别的。使用v-model绑定时,值的类型是date 类型,也就是说如果你要传给后端一个’2016-01-15’,那就需要额外的处理,那么怎么处理起来比较简单呢,这就是on-change
的魅力所在,该事件返回两个值,已经格式化后的日期,比如 2016-01-01,和当前的日期类型,比如 date,因此,你只需要将其格式化后的日期重新复制给v-model绑定的值即可。那么返回的格式由什么决定呢,format
。这个既定义了组件的显示格式,同时也是chang事件的返回格式,所以你不需要去解析data类型,然后复制给v-model。示例如下,
<template>
<Row>
<Col span="12">
<DatePicker type="date" placeholder="Select month" :value="value1"
@on-change="value1 = $event" format="yyyy-MM/dd" ></DatePicker>
</Col>
<Col span="12">
<Button style="margin:0 10px;" @click="resetData">格式化后</Button>
</Col>
</Row>
</template>
<script>
export default {
data () {
return {
value1: '2016-01-01',
}
},
methods: {
resetData(){
console.log(this.value1)
}
}
}
</script>
注意:如果你仅仅是回显后端数据,而没有操作,那么使用value绑定而不是使用v-model,因为此时不会触发on-chang事件。