楼赛第 31 期（Web 前端挑战）【功能实现】搜一搜呀折叠手风琴

weixin_46201450

已于 2022-04-08 00:30:39 修改

阅读量766

点赞数 1

文章标签：前端

于 2022-02-22 12:24:51 首次发布

本文链接：https://blog.csdn.net/weixin_46201450/article/details/123065480

版权

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="vue.min.js"></script>
    <link rel="stylesheet" href="./css/style.css" />
  </head>

  <body>
    <div id="app">
      <div class="search-wrapper">
        <input type="text" v-model="search" @input="query()" placeholder="请搜索" />
      </div>
      <div class="wrapper">
        <div class="card" v-for="post in filterList">
          <a v-bind:href="post.link" target="_blank">
            <img v-bind:src="post.img" />
            {{ post.title }}
          </a>
        </div>
      </div>
    </div>
    <script>
      class Post {
        constructor(title, link, img) {
          this.title = title;
          this.link = link;
          this.img = img;
        }
      }

      const app = new Vue({
        el: "#app",
        data: {
          search: "",
          postList: [
            new Post(
              "小猫咪",
              "https://unsplash.com/s/photos/cat",
              "./images/cat.png"
            ),
            new Post(
              "小狗狗",
              "https://unsplash.com/@joeyc",
              "./images/dog.png"
            ),
            new Post(
              "北极熊",
              "https://unsplash.com/@hansjurgen007",
              "./images/bar.png"
            ),
            new Post(
              "狮子",
              "https://unsplash.com/@hansjurgen007",
              "./images/lion.png"
            ),
            new Post(
              "小鸟",
              "https://unsplash.com/@eugenechystiakov",
              "./images/birds.png"
            ),
            new Post(
              "狐狸",
              "https://unsplash.com/@introspectivedsgn",
              "./images/fox.png"
            ),
          ],
          filterList:[],
        },
        created:function(){
          this.filterList=this.postList
        },
        methods: {

          query() {
            let newList = this.postList.filter((Post)=>{
              console.log(Post);
              if (Post.title.search(this.search)!==-1) {
                return true
              }
            })
            this.filterList=newList
            // TODO: 请补充代码
          },
        },
      });
    </script>
  </body>
</html>

2.【功能实现】折叠手风琴


<script>
$(function(){

    $(function(){
        $(".option").mouseover(function(){
        $(this).stop(true).addClass("active").siblings().stop(true).removeClass("active");
        });
        });

})
</script>

3.【代码改错】关于你的欢迎语

<script>
function generate() {
    subject = document.getElementById("subject");
    event1 = document.getElementById("event1");
    event2 = document.getElementById("event2");
    var subject = subject.value
    var event1 = event1.value
    var event2 = event2.value
    if (subject.length==0 || event1.length==0 || event2.length==0){
        return;
    }
    result = "欢迎用户"+subject+"在"+event2+"学习"+event1+"课程！";
    document.getElementById("result").value = result;
}
</script>

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>购物车</title>
	<script src="./js/vue.js"></script>
	<script src="./js/axios.js"></script>
	<link rel="stylesheet" href="./css/element-ui.css">
	<link rel="stylesheet" href="./css/index.css">
</head>

<body>
	<div class="container" id="app">
		<h4>购物车</h4>
		<!-- 购物车列表 -->
		<div >
			<el-card class="box-card" v-for="item in carlist">
				<!-- 商品图片 -->
				<img :src="item.img">
				<div>

					<span>
						{{item.name}}
						<!-- 商品名称 -->
					</span>
					<div class="bottom clearfix">
						<el-button type="text" class="button">+</el-button>
						<el-button type="text" class="button" >
							{{item.num}}
							<!-- 商品数量 -->
						</el-button>
						<el-button type="text" class="button">-</el-button>
					</div>
				</div>
			</el-card>
		</div>
	</div>
	</div>

	<!-- 引入组件库 -->
	<script src="./js/element-ui.js"></script>
	<script>
		new Vue({
			el: "#app",
			data: {
				carlist: [] //购物车列表
			},
			created() {// 在这里使用axios 发送请求
                axios({
                    method: 'get',
                    url: 'carList.json',
                    data: {    
                    }
                }).then(res => {
                    console.log(res.data)
                   this.carlist=res.data
				   console.log(this.carlist);
                });
            
        }
				

	
	})

	</script>
</body>




</html>

在这里插入图片描述

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
ul,li{
	list-style: none;
}
a{
	color: white;
	text-decoration: none;
}
input{
	outline: none;
	border: 0;
}
button{
    border: none;
}
body {
    background-image: url('../images/background-pic.jpeg');
    background-size: cover;
    color: #fff;
    height: 945;
    width: 1920;
}
.nav-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.nav-bar img {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    margin: 15px;
}
.content-container{
    display: flex;
    justify-content: center;
    text-align: center;
    margin: 50px auto;
}
.content{
    width: 450px;
    height: 600px;
    background-color: rgba(0,0,0,.45);
    border-radius: 10px;
    position: relative;
    
}
.content img{
    height: 200px;
    width: 200px;
    border-radius: 50%;
    margin-top: -80px;
}
.form h2{
    font-size: 45px;
    font-weight: 800;
}
.form input{
    font-size: 20px;
    height: 30px;
    width: 300px;
    border-radius: 5px;
    margin: 20px 0px 5px 0px;
    text-align: center;
}
.form button{
    width: 80px;
    height: 30px;
    border-color: #041c32;
    background-color: #2d4263;
    font-size: 16px;
    color: white;
}

在这里插入图片描述

.home-wrapper .banner .banner-conent .hero {
  margin-top: 3rem;
  text-align: center;
}
/* TODO: main-wrapper 通过设置main-wrapper 布局方式 让.main-left  .main-right 正确显示 */
.main-wrapper {
  margin: 1.5rem auto 0 auto;
  max-width: 1100px;
  padding: 0 0.9rem;
  box-sizing: border-box;
  /* position: relative; */
  display: flex;
}

/*/* TODO 宽度自适应 居左显示 */
.main-wrapper .main-left {
  width: auto;
  /* justify-items: flex-start; */
  /* float: left; */
}

/* 宽 245px 居右显示 */
.main-wrapper .main-right>* {
  box-sizing: border-box;
  width: 245px;
  /* float: right; */
}

weixin_46201450

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
楼赛第 31 期（Web 前端挑战）【功能实现】搜一搜呀折叠手风琴

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script src="vue.min.js">&lt
复制链接

扫一扫