vue实现级联，一层一层加载数据

最新推荐文章于 2024-08-01 15:15:14 发布

键盘上的那抹灰

最新推荐文章于 2024-08-01 15:15:14 发布

阅读量454

点赞数

分类专栏： html 笔记文章标签： vue js

本文链接：https://blog.csdn.net/qq_42453562/article/details/113174559

版权

本文详细介绍了如何使用Vue.js实现数据的级联加载，通过逐层获取数据，优化前端性能。配合代码示例，阐述了关键步骤和实现原理。

摘要由CSDN通过智能技术生成

在这里插入图片描述
附代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>ViewUI example</title>
		<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script><!-- 字节跳动js压缩版 -->
		<script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
		<style>
		</style>
	</head>
	<body>
		<div id="app">
			<div class="tip" :class="{'tipShowcss':tipShow==1}" @click="provenceListshowIF()">{
   {
   tip}}
			<img v-if="tipShow==1"  src="https://imgs.ruiyanghj.com/lb.png"/>
			<img v-if="tipShow==0"  src="https://imgs.ruiyanghj.com/lt.png"/>
				<!-- <img :src="{tipShow===1?'https://imgs.ruiyanghj.com/lb.png':'https://imgs.ruiyanghj.com/lt.png'}" /> -->
			</div>
			<div id="area" v-if="provenceListshow">
				<div class="provenceListshow">
					<div class="span_hover" v-for="(item,index) in provenceList" :key="index" @click="loadCity(item)" :class="{checked:provenceItem==item}">{
   {
   item.name}}</div>
				</div>
				<div class="cityListShow" v-if="cityList">
					<div class="span_hover" v-for="(item,code) in cityList" :key="code" @click="loadDomain(item)" :class="{checked:cityItem==item}">
						{
   {
   item.name}}</div>
				</div>
				<div class="domainListShow" v-if="domainList">
					<div class="span_hover" v-for="(item,index) in domainList" :key="index" @click="loadStreet(item)" :class="{checked:domainItem==item}">
						{
   {
   item.name}}</div>
				</div>
				<div class="steetListShow" v-if="streetList">
					<div class="span_hover" v-for="(item,index) in streetList" :key="index" @click="loadCommunity(item)" :class="{checked:streetItem==item}">
						{
   {
   item.name}}</div>
				</div>
				<div class="communityListShow" v-if="communityList">
					<div class="span_hover" v-for="(item,index) in communityList" :key="index" @click="loadVillage(item)" :class="{checked:communityItem==item}">
						{
   {
   item.name}}</div>
				</div>
				<div class="villageListShow" v-if="villageList">
					<div class="span_hover" v-for="(item,index) in villageList" :key="index" @click="loadHouse(item)" :class="{checked:villageItem==item}">
						{
   {
   item.name