vue實(shí)現(xiàn)加載并展示后臺數(shù)據(jù)的tab選項(xiàng)卡

vue用于渲染頁面

jquery用于方法實(shí)現(xiàn)動態(tài)效果

<div class="content">		<!-- change方法, 數(shù)值改變觸發(fā) -->	<select v-on:change="getData()" name="" id="dataSelect">		<option value="" v-bind:name="index" v-for="(value, index) in items">{{value.date}}</option>	</select>			  	<!-- 為name屬性添加當(dāng)前索引值 -->	<ul v-on:click="toFlow($event)" v-bind:name="i" class="flowData" v-for="(flow, i) in flows">		<li class="li1">			{{flow.name.fullName}}<br>			{{flow.name.time}}		</li>			<li class="li2">			{{flow.val1}}		</li>		<li class="li3">			{{flow.val2}}		</li>		<li class="li4">			{{flow.val3}}		</li>				</ul>		 </div>

<script>	var vm = new Vue({		el: "#app",		data: {			user: {},			items: [],			flows: []		},		methods: {			// 根據(jù)option數(shù)值替換數(shù)據(jù)			getData: function() {				var optionIndex = $('#dataSelect option:selected').attr("name"); //選中的值				vm.flows = vm.items[optionIndex].flowsMonth;			},			toFlow: function(event) {				// 點(diǎn)擊li獲取當(dāng)前l(fā)i父輩ul的name屬性值				var flowIndex = event.target.parentNode.getAttribute("name");				var flow = (vm.flows[flowIndex]);				$.ajax({					url: 'php/test.php',					type: 'POST',					dataType: "json",					data: {						flow: flow					},					success: function(data) {						console.log(data);					}				})				}		}	}) 	$(function(){		$.ajax({			url: 'json/items.json',			type: 'GET',			dataType: "json",			success: function(data) {				vm.user = data.user;				vm.items = data.flows;				// 初始數(shù)據(jù)				vm.flows = vm.items[0].flowsMonth;			}		})		})</script>

{	"flows": [		{			"date": "2017年5月",			"flowsMonth": [				{					"name": {						"fullName": "xxx 10G",						"time": "當(dāng)月有效"					},					"val1": "200",					"val2": "1.3",					"val3": "2300"				},				{					"name": {						"fullName": "xxx 10G",						"time": "當(dāng)月有效"					},					"val1": "1",					"val2": "2",					"val3": "3"				},				{					"name": {						"fullName": "xxx 10G",						"time": "當(dāng)月有效"					},					"val1": "1",					"val2": "2",					"val3": "3"				}			]		},		{			"date": "2017年6月",			"flowsMonth": [				{					"name": {						"fullName": "xxx 10G",						"time": "當(dāng)月有效"					},					"val1": "200",					"val2": "1.3",					"val3": "2300"				},				{					"name": {						"fullName": "xxx 10G",						"time": "當(dāng)月有效"					},					"val1": "1",					"val2": "22",					"val3": "33"				},				{					"name": {						"fullName": "xxx 10G",						"time": "當(dāng)月有效"					},					"val1": "12",					"val2": "32",					"val3": "13"				}			]		}		,		{			"date": "2017年8月",			"flowsMonth": [				{					"name": {						"fullName": "xxx 10G",						"time": "當(dāng)月有效"					},					"val1": "200",					"val2": "1.3",					"val3": "2300"				},				{					"name": {						"fullName": "xxx 10G",						"time": "當(dāng)月有效"					},					"val1": "61",					"val2": "542",					"val3": "63"				},				{					"name": {						"fullName": "xxx 10G",						"time": "當(dāng)月有效"					},					"val1": "51",					"val2": "22",					"val3": "34"				}			]		}	]}