第一次使用vue.js

时间:2022-10-01 20:47:46
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);
}
});