vue 정보 관리 시스템 구현
구체 적 인 효 과 는 끝부분 에 부도 가 있다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body,html{
margin: 20px 50px;
}
.title2{
color: blueviolet;
}
.table th,td{
text-align: center;
}
</style>
<link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<h1> </h1>
<div id="box">
<div class="form-group">
<label for="user"> </label>
<input type="text" class="form-control" id="user" placeholder=" " v-model='user'>
</div>
<div class="form-group">
<label for="age"> </label>
<input type="text" class="form-control" id="age" placeholder=" " v-model='age'>
</div>
<div class="form-group">
<label for=""> </label>
<select class="form-control" class="zhiwei" v-model='zhiwei'>
<option>ios </option>
<option>h5 </option>
<option>java </option>
<option>UI </option>
</select>
</div>
<div class="form-group">
<label for="sex"> </label>
<input type="radio" class="sex" name="inlineRadioOptions" id="inlineRadio1" value=" " v-model='sex'>
<input type="radio" class="sex" name="inlineRadioOptions" id="inlineRadio1" value=" " v-model='sex'>
</div>
<button class="btn btn-success" @click='add()'> </button>
<button class="btn btn-danger" @click="chongzhi()"> </button>
<h3 class="title2"> </h3>
<table class="table table-bordered">
<tr>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
</tr>
<tr v-for="(item,i) in arr">
<td>{{i}}</td>
<td>{{item.user}}</td>
<td><button class="btn btn-success " type="button" data-toggle="modal" data-target="#myModal" @click='detail(i)'> </button></td>
<td><button class="btn btn-success" @click='del(i)'> </button></td>
<td><button class="btn btn-success" @click='update(i)'> </button></td>
</tr>
</table>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel"> </h4>
</div>
<div class="modal-body">
<ul>
<li> ：{{user}}</li>
<li> ：{{age}}</li>
<li> ：{{zhiwei}}</li>
<li> ：{{sex}}</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"> </button>
<button type="button" class="btn btn-primary"> </button>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#box",
data:{
user:'',
age:'',
zhiwei:'',
sex:'',
arr:[]
},
methods:{
add(){
this.arr.push({
user:this.user,
age:this.age,
sex:this.sex,
zhiwei:this.zhiwei
})
this.user = '';
this.age = '';
this.zhiwei = '';
this.sex='';
},
del(i){
this.arr.splice(i,1)
},
chongzhi(){
this.user = '';
this.age = '';
this.zhiwei = '';
this.sex = "";
},
detail(i){
this.user = this.arr[i].user
this.age = this.arr[i].age
this.zhiwei = this.arr[i].zhiwei
this.sex = this.arr[i].sex
},
update(i){
this.arr[i].user = prompt(' ')
this.arr[i].age = prompt(' ')
this.arr[i].zhiwei = prompt(' ')
this.arr[i].sex = prompt(' ')
//console.log(prompt(' '))
}
}
})
</script>
</html>
더 많은 글 은Vue.js 전단 구성 요소 학습 튜 토리 얼을 클릭 하여 읽 기 를 배 울 수 있다.
vue.js 구성 요소 에 대한 튜 토리 얼 은 주제vue.js 구성 요소 학습 강좌를 클릭 하여 학습 하 십시오.
더 많은 vue 학습 튜 토리 얼 은 주 제 를 읽 으 세 요《vue 실전 교정》.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
