newslist.vue是一個Vue組件,用于顯示新聞列表。該組件具有以下特點:
<template><div><ul><li v-for="(item, index) in newsList" :key="index"><div class="news-title">{{ item.title }}</div><div class="news-content">{{ item.content }}</div></li></ul></div></template><script>export default { name: 'newslist', props: { newsList: { type: Array, default: [] } } } </script><style scoped>.news-title { font-size: 16px; font-weight: bold; color: #333; } .news-content { font-size: 14px; color: #666; } </style>
該組件中包含一個props參數newsList,用于傳遞新聞列表數據。該參數類型為Array,默認值為空數組。組件內部使用v-for指令遍歷newsList數組,將每一項新聞以列表形式顯示出來。每個列表項包括標題和正文兩部分,分別使用.news-title和.news-content類進行樣式控制。
該組件采用scoped樣式,僅對本組件生效,不會影響到其他組件或頁面。
上一篇mysql同時插入兩個表
下一篇css中圖片設置