Vue增删改查选项卡

 发布日期:2019-03-22 06:33:16  阅读次数:阅读数:47  来源:

#选项卡

		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
				list-style: none;
			}
			.web{
				width: 600px;
				height: 300px;
				margin: auto;
				border: 1px solid #000000;
				margin-top: 50px;
			}
			ul{
				font-size: 0;
			}
			li{
				display: inline-block;
				width: 199px;
				border-right: 1px solid #000000;
				border-bottom: 1px solid #000000;
				font-size: 20px;
				text-align: center;
				background: orangered;
				color: white;
			}
			li:nth-child(3){
				width: 200px;
				border-right: none;
			}
			li:nth-child(1){
				color: yellow;
				background: skyblue;
			}
			.xuan{
				position: relative;
				height:273px;
			}
			.ji{
				position:absolute;
				left: 0;
				top: 0;
				display: none;
				width: 100%;
				height: 100%;
			}
			.ji:nth-child(1){
				display: block;
				background: #3E999F;
			}
			.ji:nth-child(2){
				background: #494949;
			}
			.ji:nth-child(3){
				background:#D54E53;
			}
		</style>
		<div class="web">
			<ul>
				<li @click="shj(index)" v-for="(item,index) in list">{{item.name}}</li>
			</ul>
			<div class="xuan">
				<div class="ji">点击</div>
				<div class="ji">事件</div>
				<div class="ji">触发</div>
			</div>
		</div>
		var vm = new Vue({
				el:".web",
				data:{
					list:[
						{
							"name":"点击"	
						},{
							"name":"事件"
						},{
							"name":"触发"
						}
					]
				},
				methods:{
					shj:function(index){
						var ji = document.querySelectorAll(".ji")
						var li = document.querySelectorAll("li")
						for (var i=0;i<ji.length;i++) {
							ji[i].style.display="none";
							li[i].style.color="white";
							li[i].style.background="orangered";
						}
						ji[index].style.display="block";
						li[index].style.color="yellow";
						li[index].style.background="skyblue";
					}
				}
			})

#选项卡二

		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
				list-style: none;
				box-sizing: border-box;
			}
			
			.tab{
				width: 300px;
				height: 300px;
				border: 1px solid #000000;
				margin: 50px auto;
			}
			.title{
				width: 100%;
				height: 50px;
				overflow: hidden;
			}
			.title li{
				width: 33.33%;
				height: 100%;
				border: 1px solid #000000;
				float: left;
				cursor: pointer;
				text-align: center;
				line-height: 50px;
				/*禁止用户选择文字*/
				-moz-user-select: none;
				-webkit-user-select: none;
				-ms-user-select: none;
			}
			.cont{
				width: 100%;
				height: 250px;
			}
			[v-cloak]{
				display: none;
			}
		</style>
		<div class="app" v-cloak>
			<div class="tab">
				<ul class="title">
					<li v-for="(item,index) in titList" @click="sleOption(index)">{{item}}</li>
				</ul>
				<div class="cont">
					<p>{{contList[idx]}}</p>
				</div>
			</div>
		</div>

v-cloak:当数据渲染完成后会被移除

			var vm =new Vue({
				el:".app",
				data:{
					titList:[
						"html","css","JavaScript"
					],
					contList:["html是超文本标记语言","css是....","JavaScript是..."],
					idx:0
				},
				methods:{
					sleOption:function(index){
						console.log(index);
						this.idx=index;
						console.log(this)
					}
				}
			})

#增删改查

		<style type="text/css">
			.userInfo{
				width: 350px;
				height: 250px;
				background: #195A9E;
				border-radius: 10px;
				overflow: hidden;
				float: left;
				margin-left: 30px;
			}
			.userInfo p{
				color: #fff;
				width: 250px;
				margin: 20px auto;
				line-height: 30px;
			}
			.userInfo p input{
				border: none;
				outline: none;
				color: #000;
				width: 180px;
				line-height: 25px;
				margin-left: 5px;
				padding-left: 5px;
				border-radius: 5px;
			}
			.btn{
				text-align: center;
				margin-top: 36px;	
			}
			.btn button{
				width: 70px;
				height: 30px;
				border-radius: 6px;
				border: none;
				outline: none;
				cursor: pointer;
			}
			.btn button:hover{
				background: gray;
				color: #fff;
			}
			.tab{
				width: 480px;
				border-radius: 15px;
				border: 1px solid #195A9E;
				margin: 30px auto;
				overflow: hidden;
			}
			.tab>table{
				width: 100%;
				text-align: center;
			}
			.thead{
				background: #195A9E;
				line-height: 42px;
				color: #fff;
			}
			.tab td{
				line-height: 35px;
			}
			.del{
				width: 60px;
				height: 25px;
				border-radius: 6px;
				border: none;
				outline: none;
				cursor: pointer;
			}
			.del:hover{
				background: gray;
				color: #fff;
			}
			table tr:not(:last-of-type) td{
				border-bottom: 1px solid #195A9E;
			}
		</style>
		<div class="app">
			<div class="userInfo">
				<p>姓名:<input type="text" v-model="useName" placeholder="请输入用户名" /></p>
				<p>年龄:<input type="text" v-model="age" placeholder="请输入年龄" /></p>
				<p>性别:<input type="text" v-model="sex" placeholder="请输入性别" /></p>
				<div class="btn">
					<button	@click="add">增加</button>
					<button @click="delall">删除选中</button>
					<button @click="order">排序</button>
				</div>
			</div>
			<div class="tab">
				<table border="0" cellpadding="0" cellspacing="0">
					<tr class="thead"><th>id</th><th><input v-model="isallinp" type="checkbox" @change="allsel"/>全选</th><th>姓名</th><th>年龄</th><th>性别</th><th>操作</th></tr>
					<!--在表格或者有严格规定元素的位置的标签需要通过is属性来引入组件(li,dd,dt)-->
					<tr v-for="(item,index) in list" @changeinp="chooseinp" @toindex="receivedata" :idx="index" :obj="item" is="add-tr"></tr>
				</table>
			</div>
			
		</div>
			Vue.component("addTr",{
//				props:["obj"],
				props:{obj:Object,idx:Number},
				template:`<tr>
							<td>{{obj.id}}</td>
							<td><input type="checkbox" @change="inpstate" v-model="obj.isclick" /></td>
							<td>{{obj.name}}</td>
							<td>{{obj.age}}</td>
							<td>{{obj.sex}}</td>
							<td><button @click="del">删除</button></td>
						</tr>`,
				methods:{
					del:function(){
						console.log(this.idx);
						this.$emit("toindex",this.idx);//传递下标值给父
					},
					inpstate:function(){
						//监听复选框的状态
						this.$emit("changeinp",this)
					}
				}
			});
			new Vue({
				el:".app",
				data:{
					useName:"",
					age:"",
					sex:"",
					ID:1,
					isclick:false,//绑定表单元素checkbox
					list:[],
					isallinp:false//绑定表头的表单元素checkbox
				},
				methods:{
					add:function(){
						//添加条目
						var obj ={name:this.useName,age:this.age,sex:this.sex,id:this.ID++,isclick:this.isclick}
						console.log(this.$data);
						this.list.push(obj)
					},
					receivedata:function(res){
						//res:接收子传过来的下标值
						//删除条目
						console.log(res)
						this.list.splice(res,1);
					},
					delall:function(){
						//删除选中
						console.log(this.list);
						this.list = this.list.filter(function(item){//item代表的是list里面的元素
							return !item.isclick;
						});
						this.isallinp=false;//取消全选工能按钮的选中状态
					},
					allsel:function(){
						//全选
						for(var i=0;i<this.list.length;i++){
							this.list[i].isclick=this.isallinp;
						}
					},
					chooseinp:function(){
						//反选
						console.log(this.list)
						var that =this;
						var arr = [];
						this.list.forEach(function(item){
							
							if(!item.isclick){
								that.isallinp=false;
								arr.push(item);
							};
							if(arr.length<=0){
								that.isallinp=true	
							}
						});
					},
					order:function(){
						//排序
						this.list.sort(function(a,b){
							return a.age-b.age;
						});
					}
				}
			})
如果您有好的新闻与建议,欢迎点击文章投稿

    发表评论

    电子邮件地址不会被公开。

  • 内容

  • 网名