对多个类使用模板文字

Question

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

这是我用来在 HTML 中创建 classes 的数据，如下所示：

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"不包含在class中。我做错了什么？

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 />

所以省略引号是有效的，除非你有 space

更短的表示法是：

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

另请注意 type=checkbox 没有引号表示法，浏览器将添加引号

对多个类使用模板文字

Use template literals for multiple classes

html

components

web-component

template-literals

对多个 类 使用模板文字

Use template literals for multiple classes

html

components

web-component

template-literals

对多个类使用模板文字