<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue-Instructions</title>
<!-- 1,Introduce file -->
<script src="../JS/"></script>
</head>
<body>
<!-- 3, edit view -->
<div id="app">
<table border="1" cellspacing="0" width="60%">
<tr>
<th>serial number</th>
<th>Name</th>
<th>age</th>
<th>gender</th>
<th>score</th>
<th>grade</th>
</tr>// Show all information through v-for<tr align="center" v-for="(user,index) in users">
<td>{{index + 1}}</td> <!-- index starts from 0 by default -->
<td>{{}}</td> <!-- The user here is an object, you can get the name through .name -->
<td>{{}}</td>
<td>
<!-- If gender = 1: Show male; gender = 2: Show female -->
<span v-if=" == 1">male</span>
<span v-if=" == 2">female</span>
</td>
<td>{{}}</td>
<td>
<!-- Score level: only one -->
<span v-if=" >= 85">excellent</span>
<span v-else-if=" >= 60">Pass</span>
<span style="color: red;" v-else>Failed</span>
</td>
</tr>
</table>
</div>
</body>
<script>
// 2, define Vue object
new new Vue({
el: "#app", //Vue takes over area
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: {
}
})
</script>
</html>
