本次小程序采用ES6开发标准,不会的宝宝们请先学习,再来观看吧!
使用条件:使用ES6标准开发;因为采用了Bootstrap在线,所以需要联网;VSCode开发工具,在本地服务器中打开。
代码展示:
Demo.html(网页),Demo.css(样式),Test01.js(菜单类),Test02.js(循环菜单),Test03.js(增,删操作)
下面进行一一展示:
Demo.html(网页):
Document名称 | 价格 | 图片 | 操作 |
名称 | 价格 | 数量 | 操作 |
import {db_foot} from './Test02.js';
let contents = [];
window.onload = function(){
for(const foots of db_foot()){
contents.push(`
${foots.name}${foots.price}${foots.pic}加入菜单`);
document.getElementById('tbody').innerHTML = contents.join("");
};
};
Demo.css(样式):
*{margin: 0;padding: 0;}
tr,td{
text-align:center;
line-height: 20px;
}
td{
vertical-align: middle;
}
Test01.js(菜单类):
export default class Person{
constructor(name,price,pic){
this.name = name;
this.price = price;
this.pic = pic;
}
}
Test02.js(循环菜单):
import Person from './Test01.js';
export function db_foot(){
let foots = new Array();
foots.push(new Person('鱼香肉丝',100,''));
foots.push(new Person('宫保鸡丁',200,''));
foots.push(new Person('菠萝吹雪',300,''));
return foots;
}