Vue 中实现三级联动下拉框

最新推荐文章于 2023-10-30 18:44:29 发布

原创

最新推荐文章于 2023-10-30 18:44:29 发布 · 5.9k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#Vue #三级联动下拉框

本文详细介绍了如何在Vue.js应用中实现三级联动的下拉选择框效果，包括组件设计、数据绑定和事件处理，帮助开发者理解Vue的响应式原理和组件通信机制。

<!DOCTYPE html>
<html lang='en'>
<head>
	<title>下拉框三级联动</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- bootstrap -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
	<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
	<script src="https://cdn.bootcss.com/vue/2.6.8/vue.js"></script>
	
	<style type="text/css">
		[v-clock]{
			display: none
		}
	</style>
</head>
<body>
	<div class="row">
		<div style="height: 260px"></div>
		<div class="col-md-3"></div>
		<div class="col-md-6">
			<div id="test">
			    一级下拉框：
			    <select v-model="L1_selected">
			        <option v-for="item in L1" :value="item.id"&g