vue 학생 정보 관리 시스템 실현
인터페이스
코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-- </title>
<!-- -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
.title{margin:20px;font-weight: bold;font-size: 20px;}
</style>
</head>
<body>
<div id="app">
<!-- ：style -->
<table :style="[render_table]">
<!-- ：class -->
<caption :class="['title']"> </caption>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<!-- -->
<tr v-for="(stu,i) in list">
<td><input type="text" v-model="stu.no"></td>
<td><input type="text" v-model="stu.name"></td>
<td><input type="text" v-model="stu.age"></td>
<!-- -->
<td><input type="button" value=" " @click="del(i)"></td>
</tr>
</table>
<!-- -->
<div :style="[render_form]">
<input type="search" v-model="no" placeholder=" "><br>
<input type="search" v-model="name" placeholder=" "><br>
<input type="search" v-model="age" placeholder=" "><br>
<input type="button" value=" " @click="add">
</div>
<!-- , -->
<div>
<h2> </h2>
<ul v-for="(stu,i) in list">
<!-- -->
<li>{{stu.no}}</li>
<li v-text="stu.name"></li>
<li v-html="stu.age"></li>
</ul>
</div>
</div>
<script>
// Vue
var vm = new Vue({
el: "#app", //
data: {
no:"",
name:"",
age:"",
list:[
{
no:"001",
name:"TOM",
age:18,
},{
no:"002",
name:"Juy",
age:19,
},
{ no:"003",
name:"Mlo",
age:20,
}
],
//
render_table:{"width":"700px","text-align":"center"},
render_form:{"width":"300px","text-align":"center","margin-top":"50px"}
},
methods:{
//
add(){
this.list.push({no:this.no,name:this.name,age:this.age});
this.no="";this.name="";this.age="";
},
//
del(i){
if(confirm(" ？")){
this.list.splice(i,1);
}
}
}
})
</script>
</body>
</html>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에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
