<span>{{ $route.params.tname }}【{{ $route.params.subname }}】</span>为什么要加$符号
时间: 2024-06-14 14:05:39 浏览: 3
在Vue.js中,使用$符号是为了访问Vue实例的属性或方法。$route是Vue Router提供的一个全局对象,用于访问当前路由的信息,例如路由参数。$route.params是一个对象,包含了当前路由的所有参数。在你提供的代码中,<span>{{ $route.params.tname }}【{{ $route.params.subname }}】</span>是用来显示当前路由的tname和subname参数的值。
范例:在Vue.js中,使用$符号访问路由参数的值:
```html
<template>
<div>
<span>{{ $route.params.tname }}【{{ $route.params.subname }}】</span>
</div>
</template>
<script>
export default {
mounted() {
console.log(this.$route.params.tname); // 输出当前路由的tname参数的值
console.log(this.$route.params.subname); // 输出当前路由的subname参数的值
}
}
</script>
```
相关问题
删除功能报错,请改正 <body> <div> <table id="table"> <thead>学生信息表</thead> <tr> <td id="id">编号</td> <td id="tname">姓名</td> <td>性别</td> <td>操作</td> </tr> <tr> <td>1</td> <td>nxy</td> <td>女</td> <td> <a href="Javascript:void(0);" onclick="delTr(this)">删除</a> </td> </tr> </table> </div> <script> function delTr(obj) { var tr = obj.parentNode.parentNode; var table = tr.parentNode; document.getElementsByTagName("table")[0].removeChild(tr); } </script> </body>
在这段代码中,删除功能的实现有一个错误。应该在thead标签中加入一个tr标签来包含标题行中的所有单元格,以便使其与数据行具有相同的列数。同时,应该更改thead标签的显示方式为表头,而不是普通文本。修改后的代码如下:
```
<body>
<div>
<table id="table">
<thead>
<tr>
<th>学生信息表</th>
</tr>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>nxy</td>
<td>女</td>
<td>
<a href="Javascript:void(0);" onclick="delTr(this)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<script>
function delTr(obj) {
var tr = obj.parentNode.parentNode;
var table = tr.parentNode;
table.removeChild(tr);
}
</script>
</body>
```
<table> <tr> <td class="action-buttons"> <button onclick="exportAsImage()">导出为图片</button> </td> </tr> <tr> <th>序号</th> <th>课程代码</th> <th>课程名称</th> <th>授课教师</th> <th>教师账号</th> <th>审批结果</th> <th>操作</th> </tr> <c:forEach items="${list3}" var="apply" varStatus="status"> <tr> <td>${status.index + 1}</td> <td>${apply.coursecode}</td> <td>${apply.coursename}</td> <td>${apply.tname}</td> <td>${apply.tid}</td> <td>${apply.result}</td> <td class="action-buttons"> <button class="button" onclick="check('${apply.aid}')">查看</button> </td> </tr> </c:forEach> </table>分析一下这段代码
这段代码是一个HTML表格的代码,包含了表头和通过JSTL的<c:forEach>标签来循环生成表格行。
在这个表格中,使用了一些CSS类来设置样式。例如,class="action-buttons"用于设置一个单元格的样式,class="button"用于设置一个按钮的样式。
表格的结构如下:
- 第一个<tr>标签包含了一个<td>单元格,用于放置一个按钮。当按钮被点击时,会调用JavaScript函数exportAsImage()。
- 第二个<tr>标签是表头行,包含了多个<th>单元格,用于显示表格的列标题。
- 使用<c:forEach>标签来循环生成表格的数据行。它遍历了名为"list3"的数据列表,并将当前元素存储在名为"apply"的变量中。同时,使用varStatus属性定义了一个名为"status"的循环状态变量,可以使用它来获取当前循环的索引等信息。
- 在<c:forEach>标签内部,使用<tr>标签来生成表格的数据行。每一行包含了多个<td>单元格,用于显示具体的数据。其中,使用${}语法来引用变量的值,例如${status.index + 1}表示当前循环的索引加1。
- 最后一个<td>单元格中有一个按钮,当按钮被点击时,会调用JavaScript函数check()并传递参数'${apply.aid}'。
这个表格是动态生成的,数据来源于名为"list3"的数据列表。通过循环生成表格行,每一行显示了一个申请的相关信息,并在最后一列包含了一个按钮,用于执行特定操作。
相关推荐
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)