vue仿携程分类选择栏

vuejs:

<script type="text/javascript">
	var vm = new Vue({
		el:'#app',
		data(){
			return {
				list:[
					{
						index:0,
						name:'目的地',
						itemList:[
							{name:'马累', nameShow:false},
							{name:'马尔代夫', nameShow:false},
							{name:'双鱼岛', nameShow:false},
							{name:'宁静岛', nameShow:false},
							{name:'茉莉岛', nameShow:false},
						],
						setName:'多选',
						itemState:false,
						selectList:[],
						itemRowShow:true
					},
					{
						index:1,
						name:'途径地',
						itemList:[
							{name:'马尔代夫', nameShow:false},
							{name:'双鱼岛', nameShow:false},
							{name:'茉莉岛', nameShow:false}
						],
						setName:'多选',
						itemState:false,
						selectList:[],
						itemRowShow:true
					},
					{
						index:2,
						name:'选择天数',
						itemList:[
							{name:'4天', nameShow:false},
							{name:'7天', nameShow:false},
							{name:'10天', nameShow:false}
						],
						setName:'多选',
						itemState:false,
						selectList:[],
						itemRowShow:true
					}
				]
			}
		},
		mounted:function(){
			
		},
		methods:{
			itemClick(int,index){
				
			},
			// 清除
			resetClick(){
				
			},
			// 已选择每项的X键
			minItemClick(minIndex){
				
			},
			// 多选按钮
			btnClick(index){
				
			},
			// 多选下的确定按钮
			sureClick(index){
				
			},
			// 多选下的取消按钮
			cancelClick(index){
				
			}
		}
	})
</script>

将data数据中心模拟数据，渲染到视图层，视图层代码如下所示：

<div id="app">
	<div class="box">
		<div id="main" class="main">
			<div class="itemRow" v-for="(item,index) in list" :key="index" v-show="item.itemRowShow">
				<div class="showFrame clearfix">
					<span class="fl nameFrame">{{item.name}}</span>
					<dl class="fl clearfix">
						<dd class="fl" v-for="(items,index) in item.itemList">{{items.name}}</dd>
					</dl>
					<div class="btn fr">
						<span>{{item.setName}}</span>
						<span>+</span>
					</div>
				</div>
				<div class="hideFrame clearfix" v-show="item.itemState">
					<div class="fl hideItem" v-for="(int,index) in item.selectList">{{int}}</div>
				</div>
				<div class="btnFrame" v-show="item.itemState">
					<span @click="cancelClick(item.index)">取消</span>
					<span @click="sureClick(item.index)">确定</span>
				</div>
			</div>
			
			<div class="selectFrame clearfix">
				<span class="fl nameFrame">已选择</span>
				<ul id="selectList" class="fl selectList"></ul>
				<span class="fr reset">清除</span>
			</div>
		</div>
	</div>
</div>

视图层对应的css样式，如下所示：

*{
	margin: 0;
	padding: 0;
}
.fl{
	float: left;
}
.fr{
	float: right;
}
.clearfix:after{
	display: block;
	content: '';
	clear: both;
}
.box{
	width: 680px;
	padding: 5px 15px;
	margin: 10px auto;
	font-size: 14px;
	border: 2px solid #257bf6;
	border-radius: 5px;
}
.main .itemRow{
	padding: 5px 0px;
}
.nameFrame{
	width: 60px;
}
.main dl dd{
	margin: 0 5px;
	border: 1px solid #fff;
	padding: 0 5px;
	border-radius: 5px;
	outline: 1px dashed red;
}
.btn{
	padding: 3px 8px;
	font-size: 12px;
	border-radius: 3px;
	background-color: #eef1f6;
}
.reset{
	font-size: 12px;
	color: #257BF6;
	cursor: pointer;
	margin-top: 5px;
}

样式渲染数据后，浏览器显示效果显示如下所示：

点击每一项，将其添加到“已选择”处，需要在方法中心添加对应的方法，如下所示：