vue新闻列表

<template>
  <view class="news-wrap">	 
	<view class="newcont">
		<view class="news-item"  v-for="(item,index) in new_list" :key="index">
			<view class="news-intr">
				<view  class="news-title" >
					<text >{{item.name}}</text>
				</view>
				<view class="news-info">
					<view class="news-time"><text>{{item.create_time}}</text></view>
					<view class="news-type"><text>{{item.real_num}}浏览</text></view>					
				</view>				
			</view>
			<view v-if="item.image" :class="{'image-section-right': true}" >
				<image :src="item.image" ></image>
			</view>
		</view>
	</view>
  </view>
</template>
<script>
export default {
  data() {
    return {
     new_list:[{
		  create_time: "2021-12-01",
		  image: "../../static/logo.png",
		  real_num:'2004',
		  name: "学党史向未来从中华民族伟大复兴视角解读党的十九届六中全会学党史向未来从中华民族伟大复兴视角解读党的十九届六中全会学党史向未来从中华民族伟大复兴视角解读党的十九届六中全会学党史向未来从中华民族伟大复兴视角解读党的十九届六中全会",
	  },{
		  create_time: "2021-12-01",
		  image: "",
		  real_num:'2004',
		  name: "学党史向未来从中华民族伟大复兴视角解读党的十九届六中全会学党史向未来从中华民族伟大复兴视角解读党的十九届六中全会学党史向未来从中华民族伟大复兴视角解读党的十九届六中全会学党史向未来从中华民族伟大复兴视角解读党的十九届六中全会",
	  },{
		  create_time: "2021-12-01",
		  image: "../../static/logo.png",
		  real_num:'2004',
		  name: "学党史向未来从中华民族伟大复兴视角解读党的十九届六中全会学党史向未来从中华民族伟大复兴视角解读党的十九届六中全会学党史向未来从中华民族伟大复兴视角解读党的十九届六中全会学党史向未来从中华民族伟大复兴视角解读党的十九届六中全会",
	  }],
	}
},
  methods: {

  },
}
</script>
<style lang="scss"> 
.news-wrap{
.newcont{
	background: #FFFFFF;
}
.news-item{
	height: 176rpx;
	margin-left:30rpx;
	margin-right:30rpx;
	display: flex;
	font-size: 30rpx;
	color: #333333;
	padding-top:30rpx;
	padding-bottom: 30rpx;
	border-bottom:2rpx #efefef solid;
	.news-intr{
		flex: 2;
		padding-right: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.news-info {
			display: flex;
			font-size: 28rpx;
			color: #999999;
			margin-left: 16rpx;
			.news-time{
				text-align: left;
			}
			.news-type{
				text-align: right;
				flex: 2;
			}
		}
		.news-title{
			text{
				 width: 100%;
				 display: -webkit-box;
				 -webkit-box-orient: vertical;
				 -webkit-line-clamp: 3;
				 overflow: hidden;
			}
		}
	}
	.image-section-right{
		flex: 1;
		max-width:220rpx;
		max-height: 200rpx;
		image{
			max-width: 100%;
			max-height: 100%;
			border-radius: 6rpx;
		}
	}		
}	
}
</style>

效果图:

  • 2
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
对于Vue新闻列表页的增删改查操作,你可以考虑以下步骤: 1. 创建一个Vue组件,用于显示新闻列表。你可以使用Vue的数据绑定来动态展示新闻列表数据。 2. 在组件中定义一个data属性,用于存储新闻列表数据。可以使用数组来存储每一条新闻的信息,例如标题、内容、时间等。 3. 在组件的mounted生命周期钩子中,通过发送HTTP请求(例如使用axios库),从后端获取新闻列表数据,并将其保存在data属性中。 4. 在组件的模板中使用v-for指令遍历data属性中的新闻列表数据,动态生成新闻列表项。 5. 实现新闻的增加功能:在组件中定义一个表单,包含需要填写的新闻信息字段(例如标题、内容等)。通过表单绑定v-model指令,将用户输入的信息与组件中的data属性进行绑定。当用户提交表单时,可以通过发送HTTP请求将表单数据发送给后端,后端进行相应的处理(例如存储到数据库)。 6. 实现新闻的删除功能:给每一个新闻列表项添加一个删除按钮,并为按钮绑定一个点击事件。当用户点击删除按钮时,可以通过发送HTTP请求将对应新闻的唯一标识(例如id)发送给后端,后端进行相应的处理(例如从数据库中删除对应的新闻)。 7. 实现新闻的修改功能:给每一个新闻列表项添加一个编辑按钮,并为按钮绑定一个点击事件。当用户点击编辑按钮时,可以展示一个表单,预先填充上对应新闻的信息。用户可以修改表单中的信息,并提交表单以完成修改。同样,将修改后的数据通过HTTP请求发送给后端进行处理。 需要注意的是,以上只是一种简单的实现方式,具体的实现细节还需要根据你的项目需求和后端接口进行调整。此外,前端框架和库的选择也会影响具体的实现方式。以上是一个基本的思路,希望对你有所帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值