如何用vue3写一个简单的列表

1. 在html中创建一个容器，用于显示列表：

<div id="app">
  <ul>
    <li v-for="(item, index) in list" :key="index">{{ item }}</li>
  </ul>
</div>

2. 在Vue3的script标签中创建Vue实例，并在data属性中定义一个数组用于存储列表数据：

const app = Vue.createApp({
  data() {
    return {
      list: ['item1', 'item2', 'item3']
    }
  }
})

3. 在Vue实例中挂载容器：

app.mount('#app')

4. 运行代码，就可以看到一个简单的列表了。可以尝试修改data中的数组，观察列表的变化。完整代码如下：

<div id="app">
  <ul>
    <li v-for="(item, index) in list" :key="index">{{ item }}</li>
  </ul>
</div>

<script>
  const app = Vue.createApp({
    data() {
      return {
        list: ['item1', 'item2', 'item3']
      }
    }
  })

  app.mount('#app')
</script>

相关问题

使用vue3写一个新闻列表

好的，我可以为您提供一些基本的Vue3代码，帮助您创建新闻列表：

<template>
  <div>
    <h1>News List</h1>
    <ul>
      <li v-for="article in newsArticles" :key="article.id">
        <h2>{{ article.title }}</h2>
        <p>{{ article.summary }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const newsArticles = ref([
      { id: 1, title: 'Article 1', summary: 'Summary of Article 1' },
      { id: 2, title: 'Article 2', summary: 'Summary of Article 2' },
      { id: 3, title: 'Article 3', summary: 'Summary of Article 3' },
    ])

    return { newsArticles }
  },
}
</script>

这是一个基本的Vue3组件，它使用一个简单的循环来渲染包含新闻文章标题和摘要的列表。您需要根据自己的需求进行修改和扩展，例如添加一个接口，获取真正的新闻数据。希望这能为您提供一些帮助！

使用vue3写一个简单的导航页面

以下是一个使用Vue3编写的简单导航页面示例：

HTML模板：

<template>
  <div class="navbar">
    <div class="logo">Logo</div>
    <div class="links">
      <a v-for="link in links" :key="link.id" :href="link.url">{{ link.title }}</a>
    </div>
  </div>
</template>

JavaScript代码：

<script>
export default {
  data() {
    return {
      links: [
        {
          id: 1,
          title: 'Home',
          url: '/'
        },
        {
          id: 2,
          title: 'About',
          url: '/about'
        },
        {
          id: 3,
          title: 'Contact',
          url: '/contact'
        }
      ]
    }
  }
}
</script>

CSS样式：

<style>
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #333;
  color: #fff;
}

.logo {
  font-size: 24px;
  font-weight: bold;
}

.links {
  display: flex;
}

.links a {
  margin-right: 10px;
  color: #fff;
  text-decoration: none;
}

.links a:hover {
  text-decoration: underline;
}
</style>

在上面的示例中，我们使用了Vue3的单文件组件来创建导航页面。我们定义了一个包含导航链接的数组，并在模板中使用`v-for`指令来渲染链接列表。我们还将CSS样式添加到组件中，以美化导航栏。