Vue.js

复制代码
html部分:

    <div region="center" border="false" title="2.选择时间段">
        <div class="Chart" id="chartContainer">
            <div class="icon">
                <span class="gray"></span>未开放<span class="green"></span>已预约<span class="blue"></span>可预约</div>
            <div class="content">
                <div class="date" id="yData">
                    <dl v-for="ymd in YMDArr">
                        <dt>{{ ymd.YMD }}</dt>
                        <dd>
                            {{ ymd.WeekName }}
                        </dd>
                    </dl>
                </div>
                <div class="echart">
                    <div class="echart_block" id="xData">
                        <div class="tu" v-for="ymd in YMDArr">
                            <ul>
                                <li v-bind:title="sjd.BeginHHmm+'-'+sjd.EndHHmm" v-bind:class="[sjd.State=='0'?'gray':sjd.State=='1'?'blue':'green']"
                                    v-bind:style="{'width':Math.ceil((sjd.Interval/$('#xData').width())*100)+'%'}"
                                    v-bind:tt="sjd.Begin" v-on:click="yuYue($event);" v-for="sjd in ymd.SJDArr">{{ sjd.BeginHHmm
                                    + '-' + sjd.EndHHmm }} </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="clear">
                </div>
            </div>
        </div>
    </div>
复制代码
复制代码
js部分:   
   $.ajax({ type:
"POST", dataType: "json", url: "", data: { ShiYanShiID: shiYanShiNode.id, ZuoWeiID: zuoWeiNode.id, KaiShiRiQi: $("#KaiShiRiQi").val(), JieShuRiQi: $("#JieShuRiQi").val() }, async: false, success: function (json) { var yDataApp = new Vue({ el: '#yData', data: { YMDArr: json.YMDArr } }); var xDataApp = new Vue({ el: '#xData', data: { YMDArr: json.YMDArr, interval: json.Interval, }, methods: { yuYue: function (e) { var obj = e.currentTarget; // 测试 alert($(obj).attr("tt")); } } }); var timeDataApp = new Vue({ el: '#timeData', data: { data: json.XData } }); }, error: function (XMLHttpRequest) { AlertError(XMLHttpRequest); } });
复制代码

 

posted @   Coder_小菜  阅读(168)  评论(0编辑  收藏  举报
编辑推荐:
· 一次Java后端服务间歇性响应慢的问题排查记录
· dotnet 源代码生成器分析器入门
· ASP.NET Core 模型验证消息的本地化新姿势
· 对象命名为何需要避免'-er'和'-or'后缀
· SQL Server如何跟踪自动统计信息更新?
阅读排行:
· “你见过凌晨四点的洛杉矶吗?”--《我们为什么要睡觉》
· C# 从零开始使用Layui.Wpf库开发WPF客户端
· 编程神器Trae:当我用上后,才知道自己的创造力被低估了多少
· C#/.NET/.NET Core技术前沿周刊 | 第 31 期(2025年3.17-3.23)
· 接口重试的7种常用方案!
点击右上角即可分享
微信分享提示