第一次使用vue.js

Posted 2020-10-05 Coder_小菜

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);
        }
    });