vue三级联动

最新推荐文章于 2024-07-24 11:11:41 发布

程序员里的小仙女

最新推荐文章于 2024-07-24 11:11:41 发布

阅读量879

点赞数 1

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_48709977/article/details/121522730

版权

三级联动运用：@change事件、v-for列表渲染进行三级关联

先看效果图

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="JS/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="items.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<div id="app">
		<h2>三级联动</h2>
		<select v-model="seleA" @change="changeA()">
			<option :value="item" v-for="item in arrAll">{{item.name}}</option>
		</select>
		<select v-model="seleB" @change="changeB()">
			<option :value="item"  v-for="item in seleA.sub">{{item.name}}</option>
		</select>
		<select v-if="seleB.sub&&seleB.sub.length" @change="seleC">
			<option :value="item" v-for="item in seleB.sub">{{item.name}}</option>
		</select>
	</div>
	<body>
		<script type="text/javascript">
			var vn = new Vue({
				el: "#app",
				methods:{
					changeA(){
						//当A下拉选择发生变化时，更新seleB（B下拉的默认值）
						this.seleB=this.seleA.sub[0];
						//更新seleC(C下拉的默认值)
						this.seleC=this.seleB.sub[0];
					},
					changeB(){
						
						//更新seleC(C下拉的默认值)
						this.seleC=this.seleB.sub[0];
					}
				},
				data() {
					return {
						arrAll:arrAll,//所有数据
						seleA:arrAll[0],//选中的第一级数据
						seleB:arrAll[0].sub[0],//b
						seleC:{}
					}
				}
			})
		</script>
	</body>
</html>

程序员里的小仙女

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue三级联动

三级联动运用：@change事件、v-for列表渲染进行三级关联先看效果图代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="JS/vue.js" type="text/javascript" charset="utf-8"></script> <sc.
复制链接

扫一扫