-
新浪微博案例
利用for循环写出新浪页面思路：
- 利用for循环，建立多个盒子
- 利用点语法取出用户头像、名称、微博内容、微博插图的内容进行渲染
- 由于微博插图有多个，所以需要在for循环中嵌套一个循环取出每一个插图的src并渲染到页面上去，这里装微博插图的盒子要设置成弹性盒子，方便排版
注意：
- 在使用数据中的图片地址时，img标签中要对src属性进行绑定
- 渲染用户是否在线（online_status的值）时，值为1则为在线，为0则为不在线；那么就要设置两个class的值，在线将盒子背景变为绿色，不在线将盒子背景变为红色。
- 做法：将不在线的class的值一直设置为true，在线的值由数据中的online_status的值决定。在写CSS样式时将在线的样式写在不在线的下方，因为这样在线的CSS样式的优先级才高于不在线的，当两个class值都为true时才会显示green
代码如下：
<script src="./sina.js">script>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'>script>
head>
<body>
<style>
.box{
width: 700px;
background-color: rgb(217, 225, 225);
border-radius: 10px;
padding-bottom: 30px;
margin: 30px auto;
}
.title{
width: 100%;
padding: 10px;
display: flex;
justify-content: flex-start;
}
.title img{
width: 50px;
height: 50px;
/* margin-right: 20px; */
border-radius: 50%;
}
#content{
width: 650px;
padding: 20px;
}
.title .no{
width: 10px;
height: 10px;
border-radius: 50%;
background-color: darkred;
}
.title .yes{
width: 10px;
height: 10px;
border-radius: 50%;
background-color: chartreuse;
}
.imgs{
width: 600px;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
margin-left: 50px;
}
.imgs img{
width: 200px;
height: 200px;
}
style>
<div id='app'>
<div v-for="el in statuses" class="box">
<div class="title">
<img :src="el.user.profile_image_url">
<div :class="{yes:el.user.online_status,no:true}">div>
<p>{{el.user.name}}p>
div>
<p id="content">{{el.text}}p>
<div class="imgs">
<img v-for="el2 in el.pic_urls" :src="el2.thumbnail_pic">
div>
div>
div>
<script>
console.log(obj)
new Vue({
el:'#app',
data:obj,
})
script>
效果图：
添加时间：
<span style="margin-left:20px;color: aliceblue;"{{el.created_at|tool}}span>
new Vue({
el: '#app',
data: obj,
filters:{
tool(str){
var time=(new Date().getTime()-new Date(str).getTime())/6000
if(time>=0&&time<1){
return "刚刚"
} else if(time>=1&&time<60){
var times=new Date(time).getMinutes()
return `${times}分钟前`
}else {
var time2=new Date(time).getHours()
return `${time2}小时前`
}
}
}
})
script>
-
相关阅读:
大学生游戏静态HTML网页设计 (HTML+CSS+JS仿英雄联盟网站15页)
解密Lawnchair：打造个性化极致的Android桌面体验
日志巡检内容
javascript阻止右键默认行为，重新添加右键新菜单
【CV基石】Soft-NMS
MySQL 查询 - 排除某些字段的SQL查询，提升查询性能
北邮22级信通院数电：Verilog-FPGA（3）实验“跑通第一个例程”modelsim仿真及遇到的问题汇总（持续更新中）
Java学习笔记4.3.1 数学计算 - Math类
【漏洞复现】shiro 反序列化 （CVE-2016-4437）
Linux用户和权限之一
- 原文地址：https://blog.csdn.net/cjx177187/article/details/126796918