vue 如何动态改变数据

Question

求大神解答，第一次使用VUE在真实项目上，搞得焦头烂额

业务场景是这样，点击按钮改变渲染的值

<ul class="ul">
<li v-for="item in all.sex">{{item}}</li>
<button @click="sexChange">更新性别数据</button>
<button @click="ageChange">更新年龄数据</button>
</ul>

export default {

data() {
  return {
    all: []
  };
},
created() {
  this.loadPicker();
},
methods: {
  loadPicker: function () {
    this.$http.get('/api/all').then((response) => {
      response = response.body;
      this.all = response.data;
      console.info(this.all);
    });
  },
  sexChange() {},
  ageChange() {}
},

};

console.info(this.all);拿到的数据是这样的

Answer 1

<li v-for="item in all.sex">{{item}}</li>

改为

<li v-for="item in now">{{item}}</li>

 return {
    all: []
  };

改为：

 return {
    all: [],
    now:"",
  };

点击的时候，把now换成你想要的就行了

Answer 2

sexChange() {},
ageChange() {}
把这两个丢到methods里面