vue项目中，有时候需要各种选项卡切换，然后还希望有一种效果，
就是当前的选项高亮或者是有下划线
效果图
代码如下：
/*------html部分------*/
<template>
<ul class="tab">
<li v-for="item in items" @click="isActive(item)" :class="{'active':item.active,'unactive':!item.active}">
<a class="select" href="javascript:;">{{item.select}}</a>
<a class="line" href="javascript:;"></a>
</li>
</ul>
</template>
/*------script部分------*/
data(){
active: false,
items: [
{select: 'A'},
{select: 'B'},
{select: 'C'},
{select: 'D'}],
status: 0
}
mounted() {
this.items.map((item, index) => {
if (index == 0) {
this.$set(item, 'active', true);
}
});
},
methods: {
isActive(item) {
this.items.forEach(item => {
this.$set(item, 'active', false);
});
this.$set(item, 'active', true);
switch (item.select) {
case 'A':
this.status = 0;
this.getList(0)
break;
case 'B':
this.status = 1;
this.getList(1);
break;
case 'C':
this.status = 2;
this.getList(2);
break;
case 'D':
this.status = 3;
this.getList(3);
break;
}
this.nowTab = item.select;
},
getList(index){
console.log('当前tab下标' + index);
},
}
/*------css部分------*/
.order .tab {
overflow: hidden;
background: #fff;
width: 100%;
border-top:0.5px solid #E5E5E5;
border-bottom:0.5px solid #E5E5E5;
}
.order .tab li {
float: left;
position: relative;
overflow: hidden;
padding: 9px 0 0px 0;
height: 42px;
width: 25%;
text-align: center;
}
.order .tab li a.select {
color: #333;
font: 16px/22px "PingFangSC-Regular";
}
.order .tab li.active a{
color: #00C892;
}
.order .tab li.active a.line {
display: inline-block;
}
.order .tab li a.line{
position: absolute;
top: 33px;
display: none;
width: 28px;
height: 3px;
background: #00C892;
border-radius: 1.5px;
}
.order .tab li a:nth-of-type(2){
right: 35px;
}
.order .tab li:nth-of-type(1) a:nth-of-type(2){
right: 33px;
}
/*------知识点------*/
官方文档说明 如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。这个时候就需要使用this.$set(this.data,”key”,value)
在vue里声明过的对象，添加新属性值，有一种写法是会更新此属性的值,但是不能检测到对象属性的添加或删除不会更新视图。
Vue 会在初始化实例时对属性执行 getter/setter，这样才能实现响应。
可以试验一下以下的例子：
<div>
<p @click="add1(obj)">{{obj.aa}}</p>
<p @click="add2(obj)">{{obj.bb}}</p>
<p @click="add3(obj)">{{obj.cc}}</p>
</div>
data() {
return {
obj: {
}
}
},
mounted() {
this.obj = {aa: 10};
this.obj.bb = 10;
this.$set(this.obj, 'cc', 0);
console.log(this.obj);
},
methods: {
add1(obj){
obj.aa = obj.aa + 2;
console.log(obj);
},
add2(obj){
obj.bb = obj.bb + 2;
console.log(obj);
},
add3(obj) {
obj.cc = obj.cc + 2;
console.log(obj);
}
}
这里面只有aa，cc才有get，set，而bb是没有的
如果要实现bb则需要像cc这么写
其次，你点击 aa，cc,这些视图、数据是同时更新的，但是你点bb,数据会更新，视图没有响应
这时当你点aa或cc的时候bb的视图也会同时更新
再举一个更直接的例子：
<template>
<div @click="get()">
<p>{{dog.name}}</p>
<p>{{dog.like}}</p>
<p>{{dog.age}}</p>
</div>
</template>
data() {
return {
dog: {
name: 'tony',
like: 'bone'
}
}
},
如果直接给dog进行赋值，可以新增属性，如age,但是视图是不会更新的,没有getter/setter
这个时候需要$set()方法，可以满足属性和更新属性
methods: {
get() {
// this.dog.age = 4;
this.$set(this.dog,"age",44);
console.log('click-click-click-click')
}
}
网友评论