工作求职贴

明天有一场web前端的实习面试,是关于vue,js,html的,在此先记录,此贴会一直更新到我找到实习的工作为止(地点:成都)
贴个图
在这里插入图片描述
大概类似于这个,不需要实现动画效果,用vue+css+js来做,不能用脚手架,我先去做做完再发出来

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="Vuecontainer">
      <div class="headertitle">
        <div
          class="titleitem"
          v-for="(item, index) in headertitle"
          :key="index"
        >
          {{item.name}}
        </div>
      </div>
      <div class="box"></div>
      <div class="goodsbody">
        <div
          class="d-flex goodsitem"
          v-for="(item, index) in list.item"
          :key="index"
        >
          <img :src="item.avatar" class="mr-1" style="width: 6rem" />
          <div>
            <p class="title">{{item.title}}</p>
            <div class="d-flex a-center">
              <p class="nprice"><span style="font-size: 25px">300</span></p>
              <p class="paynum"><span>300人付款</span></p>
            </div>
            <div style="padding-bottom: .5rem;">
              <span class="props" :class="{'guanggao':item.isadv}" v-if="item.isadv">广告</span>
              <span class="props" :class="{'includeexp':item.isincludeexp}" v-if="item.isincludeexp">包邮</span>
            </div>
            <p class="location">{{item.location}}</p>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script>
    var Vue = new Vue({
      el: "#Vuecontainer",
      data: {
        msg: "123",
        headertitle: [
          {
            name: "综合",
            icon: "",
          },
          {
            name: "综合",
            icon: "",
          },
          {
            name: "综合",
            icon: "",
          },
          {
            name: "综合",
            icon: "",
          },
        ],
        list: [],
      },
      created() {},
      mounted() {
        this.__init();
      },
      methods: {
        __init() {
          axios.get("./js/mock.json").then((res) => {
            if (res.data.msg == "ok") {
              this.list = res.data.data.list;
              console.log(res.data.data.list);
            }
          });
        },
      },
    });
  </script>
</html>
<style>
  * {
    margin: 0;
    padding: 0;
    font-size: 20px;
  }
  .headertitle {
    display: flex;
    position: fixed;
    background-color: #fff;
    height: 60px;
    width: 100%;
  }
  .titleitem {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .box {
    height: 60px;
  }
  .d-flex {
    display: flex;
  }
  .a-center {
    align-items: center;
  }
  .j-center {
    justify-content: center;
  }
  .goodsitem {
    margin: 1rem;
  }
  .mr-1 {
    margin-right: 1rem;
  }
  body,
  html {
    width: 100%;
    height: 100%;
  }
  .nprice {
    color: #ff7c02;
  }
  .paynum {
    color: #ccc;
    font-size: 15px;
    margin-left: 0.5rem;
    align-self: flex-end;
  }
  .location {
    font-size: 0.5rem;
  }
  .props {
    border: 1px solid;
    font-size: 0.5rem;
  }
  .guanggao {
    color: #ccc;
    border-color: #ccc;
    padding: 0 5px;
  }
  .includeexp{
    color: #ff7c02;
    border-color: #ff7c02;
    padding: 0 5px;
  }
</style>

模拟数据部分

{
    "msg":"ok",
    "data":{
        "list":{
                "item":[{
                    "title":"猫咪活物英短蓝猫幼猫折耳蓝白矮脚渐银",
                    "price":{
                        "oprice":100,
                        "nprice":200
                    },
                    "paynum":322,
                    "isadv":1,
                    "isincludeexp":1,
                    "location":"深圳",
                    "avatar":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603709274294&di=d353a6c09f5d0b48ab4eba1c1178b0dd&imgtype=0&src=http%3A%2F%2Fbos.pgzs.com%2Frbpiczy%2FWallpaper%2F2012%2F1%2F6%2Faeae710d55ed4afab8a5993d457634bc-2.jpg"
                },
                {
                    "title":"猫咪活物英短蓝猫幼猫折耳蓝白矮脚渐银",
                    "price":{
                        "oprice":100,
                        "nprice":200
                    },
                    "paynum":322,
                    "isadv":1,
                    "isincludeexp":1,
                    "location":"深圳",
                    "avatar":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603709274294&di=d353a6c09f5d0b48ab4eba1c1178b0dd&imgtype=0&src=http%3A%2F%2Fbos.pgzs.com%2Frbpiczy%2FWallpaper%2F2012%2F1%2F6%2Faeae710d55ed4afab8a5993d457634bc-2.jpg"
                },
                {
                    "title":"猫咪活物英短蓝猫幼猫折耳蓝白矮脚渐银",
                    "price":{
                        "oprice":100,
                        "nprice":200
                    },
                    "paynum":322,
                    "isadv":1,
                    "isincludeexp":0,
                    "location":"深圳",
                    "avatar":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603709274294&di=d353a6c09f5d0b48ab4eba1c1178b0dd&imgtype=0&src=http%3A%2F%2Fbos.pgzs.com%2Frbpiczy%2FWallpaper%2F2012%2F1%2F6%2Faeae710d55ed4afab8a5993d457634bc-2.jpg"
                },
                {
                    "title":"猫咪活物英短蓝猫幼猫折耳蓝白矮脚渐银",
                    "price":{
                        "oprice":100,
                        "nprice":200
                    },
                    "paynum":322,
                    "isadv":1,
                    "isincludeexp":0,
                    "location":"深圳",
                    "avatar":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603709274294&di=d353a6c09f5d0b48ab4eba1c1178b0dd&imgtype=0&src=http%3A%2F%2Fbos.pgzs.com%2Frbpiczy%2FWallpaper%2F2012%2F1%2F6%2Faeae710d55ed4afab8a5993d457634bc-2.jpg"
                },
                {
                    "title":"猫咪活物英短蓝猫幼猫折耳蓝白矮脚渐银",
                    "price":{
                        "oprice":100,
                        "nprice":200
                    },
                    "paynum":322,
                    "isadv":1,
                    "isincludeexp":0,
                    "location":"深圳",
                    "avatar":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603709274294&di=d353a6c09f5d0b48ab4eba1c1178b0dd&imgtype=0&src=http%3A%2F%2Fbos.pgzs.com%2Frbpiczy%2FWallpaper%2F2012%2F1%2F6%2Faeae710d55ed4afab8a5993d457634bc-2.jpg"
                },
                {
                    "title":"猫咪活物英短蓝猫幼猫折耳蓝白矮脚渐银",
                    "price":{
                        "oprice":100,
                        "nprice":200
                    },
                    "paynum":322,
                    "isadv":1,
                    "isincludeexp":0,
                    "location":"深圳",
                    "avatar":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603709274294&di=d353a6c09f5d0b48ab4eba1c1178b0dd&imgtype=0&src=http%3A%2F%2Fbos.pgzs.com%2Frbpiczy%2FWallpaper%2F2012%2F1%2F6%2Faeae710d55ed4afab8a5993d457634bc-2.jpg"
                },
                {
                    "title":"猫咪活物英短蓝猫幼猫折耳蓝白矮脚渐银",
                    "price":{
                        "oprice":100,
                        "nprice":200
                    },
                    "paynum":322,
                    "isadv":1,
                    "isincludeexp":0,
                    "location":"深圳",
                    "avatar":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603709274294&di=d353a6c09f5d0b48ab4eba1c1178b0dd&imgtype=0&src=http%3A%2F%2Fbos.pgzs.com%2Frbpiczy%2FWallpaper%2F2012%2F1%2F6%2Faeae710d55ed4afab8a5993d457634bc-2.jpg"
                }
            ]
            }
    }
}

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:游动-白 设计师:我叫白小胖 返回首页
评论

打赏作者

neverGV

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值