v2t589034

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
<div id="app">
  <button
    v-for="catalog in catalogs"
    :key="catalog.id"
    :class="{'active': current_catalog==catalog.name}"
    @click="change(catalog.name)"
    >
    {{ catalog.name }}
  </button>
</div>

CSS

button.active{
  color:red
}

JavaScript

new Vue({
  data() {
    return {
        catalogs: [{id: 999, name: '不限类目'}],
        current_catalog: '不限类目'
    }
  },
  created() {
    axios({
    	method: 'post',
      url: "/echo/json/",
      data: `json={"data":[{"id":1, "name": "pardon?"},{"id":2, "name": "me?"},{"id":3, "name": "foo"},{"id":4, "name": "bar"}]}`
    })
    .then( resp=> {
    	this.catalogs = this.catalogs.concat(resp.data.data)
    })
  },

  methods: {
    change(val) {
      this.current_catalog = val
    },
  }
}).$mount("#app")