Vue小程序项目知识积累
<template>
<view class="container">
<view class="article-list">
<view class="article-item" v-for="(item, index) in articles" :key="index">
<navigator :url="'/pages/detail/main?id=' + item.id" open-type="redirect">
<view class="title">{{ item.title }}</view>
<view class="summary">{{ item.summary }}</view>
</navigator>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
articles: [
{ id: 1, title: 'Vue.js 教程', summary: 'Vue.js 是一个构建用户界面的渐进式框架...' },
// ...更多文章数据
]
}
}
}
</script>
<style>
.article-list {
/* 样式代码 */
}
.article-item {
/* 样式代码 */
}
.title {
/* 样式代码 */
}
.summary {
/* 样式代码 */
}
</style>
这个代码示例展示了如何在Vue小程序中使用v-for指令来循环渲染一个文章列表,并使用navigator组件来实现文章详情页的跳转。同时,它还展示了如何通过传递查询参数来向详情页传递文章ID。
评论已关闭