HTML section:<Div Region= "Center"Border= "false"title= "2. Select time Period"> <Divclass= "Chart"ID= "Chartcontainer"> <Divclass= "icon"> <spanclass= "Gray"></span>Not open<spanclass= "Green"></span>Already Booked<spanclass= "Blue"></span>Reservations available</Div> <Divclass= "Content"> <Divclass= "Date"ID= "Ydata"> <DLv-for= "Ymd in Ymdarr"> <DT>{{Ymd. YMD}}</DT> <DD>{{Ymd. Weekname}}</DD> </DL> </Div> <Divclass= "Echart"> <Divclass= "Echart_block"ID= "XData"> <Divclass= "Tu"v-for= "Ymd in Ymdarr"> <ul> <LiV-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> <Divclass= "Clear"> </Div> </Div> </Div> </Div>
JS section:
$.ajax ({type:"POST", DataType:"JSON", URL:"", data: {ShiYanShiID:shiYanShiNode.id, ZuoWeiID:zuoWeiNode.id, Kaishiriqi: $ ("#KaiShiRiQi"). Val (), Jieshuriqi: $ ("#JieShuRiQi"). Val ()}, Async:false, Success:function(JSON) {varYdataapp =NewVue ({el:' #yData ', data: {Ymdarr:json. Ymdarr}}); varXdataapp =NewVue ({el:' #xData ', data: {Ymdarr:json. Ymdarr, Interval:json. Interval,}, methods: {yuyue:function(e) {varobj =E.currenttarget; //TestAlert ($ (obj). attr ("TT"))); } } }); varTimedataapp =NewVue ({el:' #timeData ', data: {Data:json. XData}}); }, Error:function(XMLHttpRequest) {alerterror (XMLHttpRequest); } });
Use Vue.js for the first time