Vue 2.0 随记
1、watch 中,immediate的用法:
immediate -->百度翻译 立即的
new Vue({ el: '#app-7', data: { groceryList: [ { id: 'a', text: '蔬菜' }, { id: 'b', text: '奶酪' }, { id: 'c', text: '随便其它什么人吃的东西' } ],first_n:"first_n",first_c:"first_c",first:"first" },watch:{ first_c:{ immediate:true, handler(curVal,oldVal){/*关键字 immediate*/ console.log("first_c 值被改变"); } }, first(curVal,oldVal){ console.log(curVal,oldVal); }, first_n:{ handler(curVal,oldVal){/*比较新老两值 判断是否改变*/ if(curVal !=oldVal) { console.log("first_n 值被改变"); } },deep:false } } })
首次加载页面时的截图:
动态watch:
created:function (){ this.first = "second"; this.$watch('first',this.aa) },methods:{ aa:function(curVal,oldVal){ console.log(curVal,oldVal); } }
2、关于vue中使用WdatePicker控件的问题
这种写法就解决了很多问题
<input id="txtAppDate" type="text" v-bind:value="base.info.ApplyDate!=null && base.info.ApplyDate!='' ? new Date(base.info.ApplyDate).Format('yyyy-MM-dd'):''" class="form-control required" onclick="WdatePicker({ el:'txtAppDate', maxDate:'#F{$dp.$D(\'txtBegin\')}', readOnly: true, dateFmt: 'yyyy-MM-dd', onpicked: function (dp) { vm.base.info.ApplyDate = dp.cal.getDateStr(); }, onclearing: function () { vm.base.info.ApplyDate = '' } })" target="申请日" name="TMApplyDate" />
上面仍无法解决IE下动态切换,导致WdatePicker.js 数据绑定的问题;以下赋值方法可解决这种问题
<input id="txtSingleRegDate" type="text" v-bind:value="base.info.SingleRegDate!=null && base.info.SingleRegDate!='' ? new Date(base.info.SingleRegDate).Format('yyyy-MM-dd'):''" class="form-control"
onclick="WdatePicker({
readOnly: true,
dateFmt: 'yyyy-MM-dd',
onpicked: function (dp)
{vm.$set('base.info.SingleRegDate',dp.cal.getDateStr())},
onclearing: function () { vm.$set('base.info.SingleRegDate','') } })" target="单国注册日" name="TMSingleRegDate" />