通过 axios 的 get 方法动态获取 json 文件数据并赋值给 vue 的 model; 并 将 model 绑定到给定的 html 中,实现数据动态展示
时间: 2023-04-03 08:04:42 浏览: 116
可以使用以下代码实现:
1. 在 vue 组件中引入 axios:
import axios from 'axios';
2. 在 vue 组件中定义 model:
data() {
return {
model: {}
}
}
3. 在 vue 组件的 mounted 钩子函数中使用 axios 的 get 方法获取 json 文件数据并将数据赋值给 model:
mounted() {
axios.get('data.json')
.then(response => {
this.model = response.data;
})
.catch(error => {
console.log(error);
});
}
4. 在 html 中使用 v-bind 指令将 model 绑定到需要展示数据的元素上:
<div v-bind:text="model.text"></div>
其中,text 是 json 文件中的一个属性,可以根据实际情况进行修改。
阅读全文