实习笔记--协会网站项目笔记1. 兄弟组件通信 2. Vue 通过for循环出来的标签，只改变其中的某一个样式 3. v

1. 兄弟组件通信

2. Vue 通过for循环出来的标签，只改变其中的某一个样式

<tr>
   <th v-for="(item,i) in tableHeadData" @click="decChange(item.value,i)" 
   ref="decChange" class="sortable both" :value='item.value' :key="i">{{item.name}}</th>
</tr>
 
decChange(val,i) {
  //将所有样式重置
  this.$refs.decChange.map(item=>{
  return item.className = 'sortable both'
 })
  //给点击的标签添加一个新的类名
this.$refs.decChange[i].className =  this.$refs.decChange[i].className = 'sortable both'+' desc'

3. vue中使用v-for循环出来的数据,如何单独控制显示隐藏

3.1 第一种方法(修改数据)

给要循环的列表每一个列表的item 里拼接一个字段

列表.forEach(item => {
	item.isShow = false // isShow 就是控制内容隐藏消失的开关
})

绑定点击事件

<van-icon v-if="item.isShow" name="arrow-up" ref="icon" @click="itemShow(item.isShow,index)" />
<van-icon v-if="!item.isShow" name="arrow-down" ref="icon" @click="itemShow(item.isShow,index)" />

要控制隐藏显示的部分

<div v-if="item.isShow" class="onOff">123</div>

事件函数

itemShow(itemIsShow,index) {
     console.log('itemIsShow:',itemIsShow)
     console.log('index:',index)
     列表[index].isShow = !itemIsShow
     this.$forceUpdate(); // 加这个是因为有时候点击页面会没反应
},

PS:$forceUpdate()迫使vue实例重新（rander）渲染虚拟DOM，注意并不是重新加载组件。

结合vue的生命周期，调用$forceUpdate后只会触发beforeUpdate和updated这两个钩子函数，不会触发其他的钩子函数。

它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。

但是这种做法并不推荐，官方说如果你现在的场景需要用forceUpdate方法 ,那么99%是你的操作有问题，如上data里不显示声明对象的属性，之后添加属性时正确的做法时用 vm.$set() 方法，所以forceUpdate请慎用。

this.$forceUpdate(); 强制刷新同等效果的：window.location.reload()

3.2 第二种方法(修改样式)

标签上的事件

<van-icon name="arrow-down" ref="icon" @click="onOffFUNC(onOff, index)" />

要现实隐藏的部分

<div class="onOff none" ref="onOff">123</div>

data 部分

onOff: false // 这个是为了区分现在是隐藏状态还是展开状态

事件函数

onOffFUNC(bool, index) {
      this.onOff = !bool
      if (this.onOff) {
        this.$refs.icon[index].classList.remove('van-icon-arrow-down') // 去除下箭头样式
        this.$refs.icon[index].classList.add('van-icon-arrow-up') // 添加上箭头样式
        this.$refs.onOff[index].classList.add('block') // 状态修改为展开
      } else {
        this.$refs.icon[index].classList.remove('van-icon-arrow-up') // 去除上箭头样式
        this.$refs.icon[index].classList.add('van-icon-arrow-down') // 添加下箭头样式
        this.$refs.onOff[index].classList.remove('block') // 状态修改为隐藏
      }
    },

style 样式

.none{
	display: none;
}
.block{
    display: block;
}

4. 路由跳转携带参数

5. js 数组对象去重

5.1方法一：对象访问属性的方法

let arr = [
    { id: '1', key: '1', value: '明月' },
    { id: '3', key: '2', value: '可欣' },
    { id: '2', key: '3', value: '小红' },
    { id: '1', key: '1', value: '小馨' },
    { id: '1', key: '2', value: '小静' }
]

let newArr = [];
let obj = {};
for (var i = 0; i < arr.length; i++) {
    if (!obj[arr[i].key]) {
        newArr.push(arr[i])
        obj[arr[i].key] = true
    }
}
console.log(newArr);

5.2 方法二：Map()方法

set方法设置key所对应的键值，然后返回整个Map结构。如果key已经有值，则键值会被更新，否则就新生成该键。

values方法可以返回Map对象值的遍历器对象

let arr = [
    { id: '1', key: '1', value: '明月' },
    { id: '3', key: '2', value: '可欣' },
    { id: '2', key: '3', value: '小红' },
    { id: '1', key: '1', value: '小馨' },
    { id: '1', key: '2', value: '小静' }
]
let map = new Map();
for (let item of arr) {
    // set方法设置key所对应的键值，然后返回整个Map结构。如果key已经有值，则键值会被更新，否则就新生成该键。
    map.set(item.id, item);
}
    // values方法可以返回Map对象值的遍历器对象
arr = [...map.values()];
console.log(arr)

5.3 方法三：reduce() 方法

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值 array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

参数	描述
total	必须。初始值, 或者计算结束后的返回值。
currentValue	必须。当前元素
currentIndex	可选。当前元素的索引
arr	可选。当前元素所属的数组对象。
initialValue	可选。传递给函数的初始值

let arr = [
    { id: '1', key: '1', value: '明月' },
    { id: '3', key: '2', value: '可欣' },
    { id: '2', key: '3', value: '小红' },
    { id: '1', key: '1', value: '小馨' },
    { id: '1', key: '2', value: '小静' }
]
const obj = {}
arr = arr.reduce((total, next) => {
    obj[next.key] ? '' : obj[next.key] = true && total.push(next)
    return total
}, [])
console.log(arr)

6. js 中的四大循环

在开发过程中经常需要循环遍历数组或者对象，使用最多的方法forEach、for…in 、 for…of，整理一下他们的异同点

6.1 for循环

其实除了这三种方法以外还有一种最原始的遍历，自Javascript诞生起就一直用的就是for循环，它用来遍历数组

var arr = [1,2,3,4]
for(var i = 0 ; i< arr.length ; i++){
	console.log(arr[i])
}

for循环中可以使用return、break等来中断循环

6.2 forEach

对数组的每一个元素执行一次提供的函数（不能使用return、break等中断循环），不改变原数组，无返回值undefined。

let arr = ['a', 'b', 'c', 'd']
arr.forEach(function (val, idx, arr) {
    console.log(val + ', index = ' + idx) // val是当前元素，index当前元素索引，arr数组
    console.log(arr)
})

6.3 for…in

循环遍历的值都是数据结构的键值

let obj = {a: '1', b: '2', c: '3', d: '4'}
for (let o in obj) {
    console.log(o)    //遍历的实际上是对象的属性名称 a,b,c,d
    console.log(obj[o])  //这个才是属性对应的值1，2，3，4
}

总结一句: for in也可以循环数组但是特别适合遍历对象

6.4 for…of

它是ES6中新增加的语法，用来循环获取一对键值对中的值

循环一个数组

let arr = ['China', 'America', 'Korea']
for (let o of arr) {
    console.log(o) //China, America, Korea
}

循环一个普通对象（报错）

let obj = {a: '1', b: '2', c: '3', d: '4'}
for (let o of obj) {
    console.log(o)   //Uncaught TypeError: obj[Symbol.iterator] is not a function
}
一个数据结构只有部署了 Symbol.iterator 属性, 
才具有 iterator接口可以使用 for of循环。
例子中的obj对象没有Symbol.iterator属性 所以会报错。

哪些数据结构部署了 Symbol.iteratoer属性了呢?

数组 Array
Map
Set
String
arguments对象
Nodelist对象, 就是获取的dom列表集合

如果想让对象可以使用 for of循环怎么办?使用 Object.keys() 获取对象的 key值集合后,再使用 for of

let obj = {a: '1', b: '2', c: '3', d: '4'}
for (let o of Object.keys(obj)) {
    console.log(o) // a,b,c,d
}

或者使用内置的Object.values()方法获取对象的value值集合再使用for of

let obj = {a: '1', b: '2', c: '3', d: '4'}
for (let o of Object.values(obj)) {
    console.log(o) // 1,2,3,4
}

循环一个字符串

let str = 'love'
for (let o of str) {
    console.log(o) // l,o,v,e
}

循环一个Map

let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);

for (let [key, value] of iterable) {
  console.log(value);
}
// 1  2  3

for (let entry of iterable) {
  console.log(entry);
}
// [a, 1]
// [b, 2]
// [c, 3]

循环一个Set

let iterable = new Set([1, 1, 2, 2, 3, 3]);

for (let value of iterable) {
  console.log(value);
}
// 1  2  3

7. 获取cookie里面的值

需要再mounted生命周期里面，并用JSON.parse()

 mounted() {
    this.loginName = JSON.parse(cookies.get(this.$member.ADMININFO)).LoginName
  }

实习笔记--协会网站项目笔记