1.v-for制作表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table{
width: 600px;
border: 2px solid orange;
text-align: center;
}
thead{
background-color: orange;
}
</style>
</head>
<body>
<div id="app">
<table>
<thead>
<tr>
<td>姓名</td>
<td>年齡</td>
<td>性別</td>
</tr>
</thead>
<tbody>
<tr v-for="p in persons">
<td>{{p.name}}</td>
<td>{{p.age}}</td>
<td>{{p.sex}}</td>
</tr>
</tbody>
</table>
</div>
<script src="../js/vue.min.js"></script>
<script>
new Vue({
el:'#app',
data:{
persons:[
{name:'張三',age:18,sex:'男'},
{name:'李四',age:28,sex:'女'},
{name:'王五',age:23,sex:'男'},
{name:'趙六',age:30,sex:'女'},
]
}
})
</script>
</body>
</html>
效果圖：
image.png
- v-bind案例，包含v-for,給類進(jìn)行綁定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.active{
background-color: orange;
font-size: 20px;
color: #fff;
}
</style>
</head>
<body>
<div id="app">
<!--給類動(dòng)態(tài)綁定-->
<!--<p v-for="(college, index) in colleges" :class="index === 2 ? 'active':''">-->
<p v-for="(college, index) in colleges" :class="index === activeIndex ? 'active':''">
{{college}}
</p>
<p :style="{color:fontColor}">今天天氣很好</p>
</div>
<script src="../js/vue.min.js"></script>
<script>
new Vue({
el:'#app',
data:{
colleges:[
'IOS學(xué)院',
'Java學(xué)院',
'HTML學(xué)院',
'UI學(xué)院',
'C++學(xué)院'
],
activeIndex:3,
fontColor:'green'
}
})
</script>
</body>
</html>
效果圖：
image.png
- 綜合小練習(xí)（學(xué)生錄入系統(tǒng)）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#app{
margin: 50px auto;
width: 600px;
}
fieldset{
border: 1px solid orange;
margin-bottom: 20px;
}
fieldset input{
width: 200px;
height: 30px;
margin: 10px 0;
}
table{
width: 600px;
border: 2px solid orange;
text-align: center;
}
thead{
background-color: orange;
}
</style>
</head>
<body>
<div id="app">
<!--第一部分-->
<fieldset>
<legend>拇指哥學(xué)生錄入系統(tǒng)</legend>
<div>
<span>姓名：</span>
<input type="text" placeholder="請輸入姓名" v-model="newStudent.name">
</div>
<div>
<span>年齡：</span>
<input type="text" placeholder="請輸入年齡" v-model="newStudent.age">
</div>
<div>
<span>性別：</span>
<select v-model="newStudent.sex">
<option value="男">男</option>
<option value="女">女</option>
</select>
</div>
<div>
<span>手機(jī)：</span>
<input type="text" placeholder="請輸入手機(jī)號碼" v-model="newStudent.phone">
</div>
<button @click="createNewStudent()">創(chuàng)建新用戶</button>
</fieldset>
<!--第二部分-->
<table>
<thead>
<tr>
<td>姓名</td>
<td>性別</td>
<td>年齡</td>
<td>手機(jī)</td>
<td>刪除</td>
</tr>
</thead>
<tbody>
<tr v-for="(p,index) in persons">
<td>{{p.name}}</td>
<td>{{p.sex}}</td>
<td>{{p.age}}</td>
<td>{{p.phone}}</td>
<td>
<button @click="deleteStudentMsg(index)">刪除</button>
</td>
</tr>
</tbody>
</table>
</div>
<script src="../js/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
persons: [
{name: '張三', age: 20, sex: '男', phone: '198895579'},
{name: '李四', age: 30, sex: '女', phone: '156895579'},
{name: '王五', age: 20, sex: '男', phone: '168895579'},
{name: '趙六', age: 25, sex: '女', phone: '178895579'}
],
newStudent: {name: '', age: 0, sex: '男', phone: ''}
},
methods: {
//創(chuàng)建一條新紀(jì)錄
createNewStudent(){
//姓名不能為空
if(this.newStudent.name ===''){
alert('姓名不能為空');
return ;
}
//年齡不能小于0
if(this.newStudent.age <= 0){
alert('年齡不能小于0');
return ;
}
//手機(jī)號碼
if(this.newStudent.phone ===''){
alert('手機(jī)號碼不正確');
return ;
}
//往數(shù)組中添加一條新紀(jì)錄
this.persons.unshift(this.newStudent)
//清空數(shù)據(jù)
this.newStudent = {name: '', age: 0, sex: '男', phone: ''}
},
//刪除一條學(xué)生記錄
deleteStudentMsg(index){
this.persons.splice(index,1);
}
}
})
</script>
</body>
</html>
效果圖：
image.png
