<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="JQuery/jquery-3.4.1.min.js"></script>
<script src="bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<style>
body {
}
#b1 {
background: url("背景.jpg");
}
#b2 {
width: 1140px;
height: 40px;
margin-top: 10px;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<img src="timg.jpg" alt="" style="width: 160px;height: 50px;">
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">华为官网</a></li>
<li><a href="#">荣耀官网</a></li>
<li><a href="#">花粉俱乐部</a></li>
<li><a href="#">企业购</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
更多精彩
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">EMUI</a></li>
<li><a href="#">应用市场</a></li>
<li><a href="#">华为终端云空间</a></li>
<li><a href="#">开发者联盟</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div id="myCarousel" class="carousel slide">
<!-- 轮播(Carousel)指标 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- 轮播(Carousel)项目 -->
<div class="carousel-inner">
<div class="item active">
<img src="2.jpeg" alt="First slide" style="height: 400px;width: 100%;">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="1.jpg" alt="Second slide"style="width: 100%;height: 400px;">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="3.jpg" alt="Third slide" style="width: 100%;height: 400px;">
<div class="carousel-caption"></div>
</div>
</div>
<!-- 轮播(Carousel)导航 -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div id="app" >
<div id="b2">
品牌:<input type="text" v-model="name">
型号:<input type="text" v-model="sex">
<button @click="add">添加</button>
品牌:<input type="text" v-model="searchName">
<button @click="search">查询</button>
</div>
<div>
</div>
<table id="b1" style="width: 1140px">
<thead>
<tr>
<td></td>
<td>品牌</td>
<td>型号</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr v-for="(user,index) in search() ">
<td></td>
<td>{{user.name}}</td>
<td>{{user.sex}}</td>
<td><button v-on:click="del(index)">取消</button></td>
</tr>
</tbody>
</table>
</div>
<div class="container" style="margin-top: 15px;">
<div class="row footer-top">
<div class="col-md-6 col-lg-6">
<h4>
<img src="101.png">
</h4>
<p>隐私声明 服务协议 COOKIES Copyright © 2012-2019 华为终端有限公司 版权所有 粤ICP备19015064号|粤公网安备 44190002003939号
增值电信业务经营许可证:粤B2-20190762|备案主体编号:44201919072182</p>
</div>
<div class="col-md-6 col-lg-5 col-lg-offset-1">
<div id="footer-bottom" class="row about">
<div class="col-sm-3">
<h5>关于</h5>
<ul class="list-unstyled">
<li><a href="#">购物指南</a></li>
<li><a href="#">配送方式</a></li>
<li><a href="#">支付方式</a></li>
<li><a href="/#/">常见问题</a></li>
</ul>
</div>
<div class="col-sm-3">
<h5>保修与退换货</h5>
<ul class="list-unstyled">
<li><a href="#" title="" target="_blank">保修政策</a></li>
<li><a href="#">退换货政策</a></li>
<li><a href="#">退换货流程</a></li>
<li><a href="#">保修状态查询</a></li>
</ul>
</div>
<div class="col-sm-3">
<h5>维修技术支持</h5>
<ul class="list-unstyled">
<li><a href="#">售后网点</a></li>
<li><a href="#">预约维修</a></li>
<li><a href="#">手机寄修</a></li>
<li><a href="#">上门服务</a></li>
</ul>
</div>
<div class="col-sm-3">
<h5 style="">特色服务</h5>
<ul class="list-unstyled">
<li><a href="#">防伪查询</a></li>
<li><a href="#">以旧换新</a></li>
<li><a href="#">礼品包装</a></li>
</ul>
</div>
</div>
</div>
</div>
<hr>
<div class="row footer-bottom">
<ul class="list-inline text-center">
<li><a href="">华为集团</a></li><span>|</span><li><a href="">华为CBG官网</a></li><span>|</span><li><a
href="">荣耀官网</a></li><span>|</span><li><a href="">花粉俱乐部</a></li><span>|</span><li><a href="">华为应用市场</a></li><span>|</span>
<li><a href="">EMUI</a></li><span>|</span><li><a href="">华为终端云空间</a></li><span>|</span><li><a
href="">开发者联盟</a></li><span>|</span><li><a href="">华为商城手机版</a></li><span>|</span>
<li><a href="">网站地图</a></li>
</ul>
</div>
</div>
</footer>
</div>
</div>
<script src="js/vue.js"></script>
<script>
var vm= new Vue({
el:'#app',
data:{
name:'',
sex:'',
searchName:'',
users:[
{name:'HUAWEI',sex:'P10'},
{name:'HUAWEI',sex:'P20'},
{name:'HUAWEI',sex:'P30'},
{name:'HUAWEI',sex:'P30'},
],
conditonUsers:null,
},
methods:{
add(){
user={
name:this.name,
sex:this.sex,
}
this.users.push(user);
},
del(index){
alert(index);
this.users.splice(index,1)
},
search(){
var resultArray= this.users.filter((user)=>{
/*判断user是否符合条件,如果腐恶返回true*/
var flag= user.name.includes(this.searchName);
return flag;
})
return resultArray;
}
}
});
</script>
bootstrap表单
最新推荐文章于 2024-04-22 10:35:30 发布