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
                }
          }
        })
View Code

首次加载页面时的截图:

            动态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" />

 

posted on 2018-06-07 22:03  胖子略显瘦  阅读(125)  评论(0编辑  收藏  举报