Hbuilderx 显示list列表 代码

HBuilderX是一款基于DCloud的前端开发工具，它支持快速构建Web应用。如果你想要在HBuilderX中显示一个列表，你可以使用Vue.js或者原生JavaScript结合HTML模板。这里是一个简单的例子，假设你正在使用Vue组件：

<template>
  <div id="list-container">
    <ul v-for="(item, index) in items" :key="index">
      <li>{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: 'Item 1' },
        { name: 'Item 2' },
        { name: 'Item 3' }
      ]
    };
  }
};
</script>

在这个例子中，`v-for`指令用于遍历数组`items`，每个元素会被渲染成一个列表项。`:key`属性用于保证数据更新时元素的唯一标识。

如果你在纯JavaScript环境中操作DOM，可以这样做：

function renderList(listData) {
  const listContainer = document.getElementById('list-container');
  listContainer.innerHTML = '';
  for (let i = 0; i < listData.length; i++) {
    const li = document.createElement('li');
    li.textContent = listData[i].name;
    listContainer.appendChild(li);
  }
}

// 初始化数据
const myList = [{ name: 'Item 1' }, { name: 'Item 2' }, { name: 'Item 3' }];
renderList(myList);