对多个类使用模板字元

Question

const dummydata = [
  { id: 1, description: "Walk the dog", completed: false },
  { id: 2, description: "Play football", completed: true }
];

这是我的数据，我用来在HTML中创建这样的类。

this.root.innerHTML = `
<div ${data.completed ? "class=todo-item done" : "class=todo-item"}> # Does not work
<input type="checkbox" ${data.completed ? "checked" : ""} />
<h4>${data.description}</h4>
</div>`;

在我的HTML中，它看起来是这样的。

<div class="todo-item" done>

"done "没有包含在类中。我到底做错了什么？

Answer 1

试试这个。

this.root.innerHTML = `
    <div class="${data.completed ? 'todo-item done' : 'todo-item'}">
    <input type="checkbox" ${data.completed ? "checked" : ""} />
    <h4>${data.description}</h4>
    </div>
`;

Answer 2

你的问题是缺少引号

<div class=todo-item />

将被浏览器解析为。

<div class="todo-item" />

和

<div class=todo-item done />

将被浏览器解析为。

<div class="todo-item" done />

所以把引号去掉是有效的。除非 你有空间

更短的记法是。

this.root.innerHTML = `
    <div class="todo-item ${data.completed ? 'done' : ''}">
    <input type=checkbox ${data.completed ? 'checked' : ''}/>
    <h4>${data.description}</h4>
    </div>`;

还要注意 type=checkbox 如果没有引号符号，浏览器将添加引号。