博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue 监听两个时间插件都变化后执行
阅读量:5112 次
发布时间:2019-06-13

本文共 3482 字,大约阅读时间需要 11 分钟。

1.

methods: {            getTaxDate: function (date) {                this.startTime = date            },            getTaxEndDate: function (date) {                this.endTime = date            }}
data () {            return {                id: 'echartsBarType',                id2: 'echartsPieType',                option: {},                option2: {},                startTime: '',                endTime: ''            }        },

 

watch:{    startTime() {                if (this.startTime) {                   console.log('开始时间',this.startTime)                } else {                    this.actTaxDate = '';                }            }}

二:

同时监听两个输入框,如果两个都有值才执行一些方法

用computed

computed: {            timeChange() {                const { startTime, endTime } = this                return {                    startTime,                    endTime                }            }        },
watch: {            timeChange: {                handler: function(val) {                    console.log('address change: ', val)                },                deep: true            }        },

 判断两个时间都有

watch: {            timeChange: {                handler: function(val) {                    if(val.startTime!=''&&val.endTime!=''){                        if(typeof val.startTime == 'string'&&typeof val.endTime=='string'){                            console.log('address change1: ',val)                        }                    }                },                deep: true            }        },

 加判断,结束时间必须大于开始时间(数据双向绑定)

getTaxDate: function (date) {                if(date>this.endTime&&this.endTime!=''){                    this.startTime = ''                    alert('开始时间不能大于结束时间');                }else{                    this.startTime = date                }            },            getTaxEndDate: function (date) {                if(date

 

 

 

 

 完整代码:

 

export default {        name: 'incomeTotal',        data () {            return {                id: 'echartsBarType',                id2: 'echartsPieType',                option: {},                option2: {},                startTime: '',                endTime: ''            }        },        components: {            IncomeHeader,            Echarts        },        mounted () {            this.getAjax()        },        computed: {            timeChange() {                const { startTime, endTime } = this                return {                    startTime,                    endTime                }            }        },        watch: {            timeChange: {                handler: function(val) {                    if(val.startTime!=''&&val.endTime!=''){                        if(typeof val.startTime == 'string'&&typeof val.endTime=='string'){                            console.log('address change1: ',val)                        }                    }                },                deep: true            }        },        methods: {            getTaxDate: function (date) {                if(date>this.endTime&&this.endTime!=''){                    this.startTime = ''                    alert('开始时间不能大于结束时间');                }else{                    this.startTime = date                }			},            getTaxEndDate: function (date) {                if(date

  

转载于:https://www.cnblogs.com/SunShineM/p/9046616.html

你可能感兴趣的文章
待整理
查看>>
一次动态sql查询订单数据的设计
查看>>
C# 类(10) 抽象类.
查看>>
Vue_(组件通讯)子组件向父组件传值
查看>>
jvm参数
查看>>
我对前端MVC的理解
查看>>
Silverlight实用窍门系列:19.Silverlight调用webservice上传多个文件【附带源码实例】...
查看>>
2016.3.31考试心得
查看>>
mmap和MappedByteBuffer
查看>>
Linux的基本操作
查看>>
转-求解最大连续子数组的算法
查看>>
对数器的使用
查看>>
【ASP.NET】演绎GridView基本操作事件
查看>>
ubuntu无法解析主机错误与解决的方法
查看>>
尚学堂Java面试题整理
查看>>
MySQL表的四种分区类型
查看>>
[BZOJ 3489] A simple rmq problem 【可持久化树套树】
查看>>
STM32单片机使用注意事项
查看>>
swing入门教程
查看>>
好莱坞十大导演排名及其代表作,你看过多少?
查看>>