前言
总结下以前项目中经常使用到的一些vue基础方面的小技术，分享给自己和网上的朋友
如下项目中的截图<点击某个时间，比如 织造一车间的白班6点到18点，能够查看全部的截图>
当页面加载时，会将部分隐藏起来，只显示前5条数据
代码如下（用的框架是vue的vux）
1 <group v-for="(item,index) in newResult":key="index" :title="item.workshop_name">
2 <cell value-align="left"v-for="(n,j) in item.data":title="n.index_key"is-link class="islink1">
3 <span v-if="n.product"v-html="n.showAll ? n.product.split(',').join('<br>') :
4 n.product.split(',').slice(0,5).join('<br>')"
5 @click="$router.push('/output/machine/'+item.workshop_id+'/'+n.shift_key)" class="islink2"></span>
6 <a class="voida" href="javascript:void(0)" @click="switchShow(index,j,n)" v-if="n.product">{{n.showAll ? '关闭显示' : '显示全部'}}</a>
7 </cell>
8
9 </group>
复制代码
当页面加载完之后，会点击显示全部按钮的时候，显示所有
computed:{
newResult(){
var data = this.result;
if(data.length){
data.forEach((n,i)=>{
// n是对象 i是数字
if(n.data.length){
n.data.forEach((m,j)=>{
// m是对象 j是数字
if(!('showAll' in data[i].data[j])){
data[i].data[j].showAll = false;
};
});
};
});
};
return this.result
}
},
点击 操作
methods:{
switchShow(index,secIndex,item){
this.$set(this.newResult[index].data[secIndex],'showAll',!item.showAll);
var temp = [].slice.call(this.newResult);
for(let i = 0; i < temp.length;i++){
this.$set(this.newResult ,i, temp[i]);
}
},
