添加任务 MVC模式

html

 <!-- 添加任务 -->
    <div id="addTryTwice"></div>

js

// --用数组，为了区分每条信息，要加id
// model
let state = {
    list: [
        { id: "1", text: "1" },
        { id: "2", text: "2" },
        { id: "3", text: "3" },
        { id: "4", text: "4" }
    ]
}
// view
function tryadd() {
    let str = `
    <input type ='text' id='twords'>
    <button id='try_btn'onclick='tryFunc()'>添加任务</button>
    <ul id='trycountent'>${
        state.list.map((e) => {
            return `<li>${e.text}</li>`
        }).join("")
        }<ul>`
    addTryTwice.innerHTML = str;
}
tryadd()
// controller
function tryFunc() {
    state.list.push({
        id: state.list.length + 1 + '',
        text: twords.value,
    });
    tryadd();
}