通过 axios 的 get 方法动态获取 json 文件数据并赋值给 vue 的 model; 并 将 model 绑定到给定的 html 中,实现数据动态展示
时间: 2023-04-03 18:04:41 浏览: 143
可以使用 axios.get() 方法获取 json 文件数据,然后将数据赋值给 vue 的 model。在 vue 中,可以使用 v-bind 指令将 model 绑定到给定的 html 中,实现数据动态展示。具体实现方法可以参考以下代码:
// 在 vue 实例中定义 model
data: {
model: {}
},
// 在 created 钩子函数中使用 axios.get() 方法获取 json 文件数据
created() {
axios.get('data.json')
.then(response => {
this.model = response.data;
})
.catch(error => {
console.log(error);
});
},
// 在 html 中使用 v-bind 指令将 model 绑定到给定的元素上
<div v-bind:id="model.id">{{ model.name }}</div>
阅读全文