#选项卡
<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;
});
}
}
})
版权声明：本文为weixin_43647163原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。