SOURCE

new Vue({
  el:"#app",
  data:{
    showArr:[{name:1,id:1}]
  },
  methods:{
    change(type){
      if(type===1){
        this.showArr = [{name:2,id:2},{name:3,id:3}]
      }else {
        this.showArr = [{name:4,id:4},{name:5,id:5}]
      }
    }
  }
})

<div id="app">
  <div class="change-wrap">
    <span class="change-item" @click="change(1)">
      娱乐新闻
    </span>
    <span class="change-item" @click="change(2)">
      社会新闻
    </span>
  </div>
  <li class="show-item" v-for="(item,index) in showArr" :key="item.id">
    {{item.name}}
    <input type="checkbox" />
  </li>
</div>

// vue列表循环渲染时，不加key时，默认是就地复用dom结构，
//这时如果有如下dom特性，如选中等，不加key此时切换的时候，依旧是选中状态