Vue学习笔记 —— 选项卡案例（基于Vue.js）

选项卡案例（基于vue.js）

使用v-for,v-on,v-bind,v-model完成

需求如下 ：

• 把数据渲染到页面
  • 利用 v-for将数据循环渲染到页面上
• 给每一个tab栏添加事件
  • 选中的tab栏，更改背景颜色，其他未选中的不变
  • 让tab栏 显示 对应的div（图片）
• 实现添加tab栏和div（图片）功能
  • 点击添加时需要判断，id、名称是否为空，为空给出对应的提示
  • 当没有填写图片路径时，给默认的图片路径
  • 添加完成，清空输入框的内

效果图如下：

HTML结构

<div id="app">
	<div class="add">
	    <input type="text"     placeholder="选项卡id" />
	    <input type="text"     placeholder="选项卡名" />
	    <input type="text"     placeholder="图片路径" />        
	    <button type="button" @click="Add">添加</button>
	</div><br />
   	<div class="tab">        
   		<ul  class="menuList">            
   			<li>甄姬</li>            
   			<li>王昭君</li>            
   			<li>小乔</li>            
   			<li>貂蝉</li>        
   		</ul>        
   			<div ><img class="cur" src="img/zj.jpg" /></div>         
   			<div ><img  src="img/zj.jpg" /></div>         
   			<div ><img