使用v-for指令实现任务列表的加载。所有任务的初始数据tasks在Vue实例创建结束的钩子函数中赋值初始数据参考tasksjson文件。动态绑定每个任务div的class对于reminder属性为true的任务样式渲染结果为class=reminder task;reminder属性为false的任务class=task
HTML代码:
<div id="app">
<h2>任务列表</h2>
<div v-for="(task, index) in tasks" :key="index" :class="{'reminder task': task.reminder, 'task': !task.reminder}">
{{ task.title }}
</div>
</div>
JavaScript代码:
new Vue({
el: '#app',
data: {
tasks: []
},
created() {
// 使用axios获取数据
axios.get('tasks.json')
.then(response => {
this.tasks = response.data;
})
.catch(error => {
console.log(error);
});
}
});
原文地址: https://www.cveoy.top/t/topic/bemu 著作权归作者所有。请勿转载和采集!