JavaWeb阶段-Vue、Ajax、Element
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue-指令</title>
<!-- 1,引入文件 -->
<script src="../JS/"></script>
</head>
<body>
<!-- 3，编辑视图 -->
<div id="app">
<table border="1" cellspacing="0" width="60%">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>成绩</th>
<th>等级</th>
</tr>
// 通过 v-for把所有信息展示出来
<tr align="center" v-for="(user,index) in users">
<td>{{index + 1}}</td> <!-- index 默认从0开始 -->
<td>{{}}</td> <!-- 这里的user是一个对象哦 ，可以通过 .name 获取姓名 -->
<td>{{}}</td>
<td>
<!-- 如果 gender = 1 ：展示男；gender = 2：展示女 -->
<span v-if=" == 1">男</span>
<span v-if=" == 2">女</span>
</td>
<td>{{}}</td>
<td>
<!-- 分数等级：只有一个 -->
<span v-if=" >= 85">优秀</span>
<span v-else-if=" >= 60">及格</span>
<span style="color: red;" v-else>不及格</span>
</td>
</tr>
</table>
</div>
</body>
<script>
// 2,定义Vue对象
new new Vue({
el: "#app", //Vue接管区域
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>