You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.
< template >
<!-- 使用 : key 动态绑定列表项的唯一键值 ， 以优化渲染性能 -- >
< li :key ="item.title" >
< div class = "page1-box" >
<!-- 用于装饰或布局的 div ， 可能包含一些样式或动画效果 -- >
< div class = "page1-point-wrapper" > < / div >
<!-- 使用 : style 动态绑定图片框的阴影颜色 ， 增强视觉效果 -- >
< div class = "page1-image" : style = "{ boxShadow: `${item.shadowColor} 0px 6px 12px` }" >
<!-- 动态加载图片资源 -- >
< img :src ="item.src" / >
< / div >
<!-- 显示列表项的标题 -- >
< h3 > { { item . title } } < / h3 >
<!-- 显示列表项的内容 -- >
< p > { { item . content } } < / p >
< / div >
< / li >
< / template >
< script >
// 定义一个 Vue 组件，名为 ListItem
export default {
// 定义组件的属性
name : 'ListItem' ,
// item 属性是一个对象，包含列表项的相关数据，是必须的属性
props : {
item : {
type : Object ,
required : true
}
}
}
< / script >
