vue.js - vue 如何动态改变数据

问题描述

问 题

求大神解答，第一次使用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);拿到的数据是这样的

解决方案

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

改为

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

 return {
    all: []
  };

改为：

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

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

这篇关于vue.js - vue 如何动态改变数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！