生命周期
生命周期指定就是一个对象从创建到销毁的整个过程。
Vue也是有的
完整的Vue周期包含8个阶段。
Vue官方生命周期流程图：
那这有什么用呢？我们可以在指定阶段做特殊的事件。
这些方法伴随生命周期的进行自动执行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>通过Vue完成表格数据的渲染展示</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<table border="1" cellspacing="0" width="60%">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>成绩</th>
<th>等级</th>
</tr>
<tr align="center" v-for="(user,index) in users">
<td>{{index+1}}</td>
<td>{{user.name}}</td>
<td>{{user.age}}</td>
<td >
<span v-if="user.gender == 1">男</span>
<span v-else-if="user.gender==2">女</span>
</td>
<td>{{user.score}}</td>
<td>
<span v-show="user.score >= 85">优秀</span>
<span v-show="user.score > 60 && user.score < 85">及格</span>
<span style="color: red;" v-show="user.score < 60">不及格</span>
</td>
</tr>
</table>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
users: [{
name: "Tom",
age: 20,
gender: 1,
score: 78
},{
name: "Rose",
age: 18,
gender: 2,
score: 86
},{
name: "Jerry",
age: 26,
gender: 1,
score: 90
},{
name: "Tony",
age: 30,
gender: 1,
score: 52
}]
},
methods:{
},
mounted(){
alert("挂载完成");
}
})
</script>
</html>
