写一段Vue的学生学号排序
时间: 2024-05-19 19:13:37 浏览: 99
下面是一个简单的Vue.js代码段,用于对学生学号进行排序:
<template>
<div>
<h1>学生学号排序</h1>
<button v-on:click="sortByNo">按学号排序</button>
<table>
<thead>
<tr>
<th>姓名</th>
<th>学号</th>
</tr>
</thead>
<tbody>
<tr v-for="student in students" :key="student.no">
<td>{{ student.name }}</td>
<td>{{ student.no }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data() {
return {
students: [
{ name: "张三", no: "20191001" },
{ name: "李四", no: "20191003" },
{ name: "王五", no: "20191002" },
],
};
},
methods: {
sortByNo() {
this.students.sort((a, b) => a.no.localeCompare(b.no));
},
},
};
</script>
在这个示例中,我们有一个包含学生姓名和学号的数组。我们在模板中使用v-for指令来循环遍历这个数组,并且使用:key指令来确保每个学生在列表中都有一个唯一的标识符。
我们还定义了一个sortByNo方法,该方法使用JavaScript的sort方法按学号对学生进行排序。我们在模板中使用v-on指令来将该方法绑定到一个按钮上,当用户单击该按钮时,该方法将被调用。
最后,我们在Vue实例的data选项中定义了一个名为students的数组,该数组将在模板中使用。我们还将该组件导出为默认组件。