刚刚学习vue.js发现laydate的日历框不显示了。查了各种资料所有都有一些路径, 我自己整理一下。终于解决了日历显示问题,也解决了model绑定问题
先看效果
直接上代码
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-2.2.3.min.js"></script> <script type="text/javascript" src="js/laydate/laydate.js"></script> <script type="text/javascript" src="js/vue.js"></script> </head> <body> <div id='app'> 开始时间:<input type='text' id='start' v-on:focus='getDate' v-model="startTime">{{startTime}} <div style="margin-top:20px;"> <button v-on:click="editDate">模拟ajax读取数据修改时间</button> </div> </div> </body> </html> <script> $(function () { var vue = new Vue({ el: '#app', data: { startTime: '' }, methods: { getDate: function () { var that = this; laydate.render({ elem: '#start', show: true, done: function (value, date, endDate) { that.startTime = value; } }); }, editDate: function () { this.startTime = "1900-06-05"; } } }); }) </script>
demo 下载地址
链接: https://pan.baidu.com/s/1GQOB9y4U3yho0_9hU4iTrw 提取码: 5wc5