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。示例如下(可將value換成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。