vue中点击元素变色,兄弟元素不变,且刷新页面还是保持

这里重点是本地存储存进去的只能是字符串,如果数据本身是数值那么在本地存储里面取出来也么转换成数值
JSON.stringify() 转换成字符串
JSON.parse() 转换成数值

<template>
  <div class='con'>
    <ul>
      <li :class="[activeClass==index ? 'active' : '']" @click=" getItem(index)" v-for="(item, index) in list" :key="index">
         {{item.name}}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      activeClass: -1,
      list: [
        { 'typeId': '1', 'name': '按钮一', 'number': '50' },
        { 'typeId': '2', 'name': '按钮二', 'number': '50' },
        { 'typeId': '3', 'name': '按钮三', 'number': '50' },
        { 'typeId': '4', 'name': '按钮四', 'number': '50' },
        { 'typeId': '5', 'name': '按钮五', 'number': '50' },
        { 'typeId': '6', 'name': '按钮六', 'number': '50' },
        { 'typeId': '7', 'name': '按钮七', 'number': '50' },
        { 'typeId': '8', 'name': '按钮八', 'number': '80' }
      ]
    }
  },
  created () {
    // 取出本地存储需要将字符串转换成数值 
    this.activeClass = JSON.parse(window.localStorage.getItem('currentPage'))
  },
  methods: {
    getItem: function (index) {
      this.activeClass = index
      // 本地存储只能存储字符串 所以这里需要转换
      window.localStorage.setItem('currentPage', JSON.stringify(this.activeClass))
    }
  },
  computed: {

  }
}
</script>
<style lang='less' scoped>
li {
  list-style: none;
  float: left;
  margin-left: 5px;
  background: yellow;
  padding: 1px;
  border-radius: 3px;
  border: 1px solid #999;
}
.active {
  color: red;
}
</style>