VUE页面循环打开文本,文本内有200行,其中一行标红打开后直接到标红行
时间: 2023-02-09 13:54:21 浏览: 78
在 Vue 中,可以使用 v-for 指令来循环遍历文本中的每一行。在每一行文本元素上添加一个属性来标识该行是否被标红,然后在渲染时使用 v-bind 指令绑定该属性来控制该行的样式。
为了跳转到标红的行,可以在绑定该属性时使用 v-on 指令绑定一个事件处理函数,在该函数中使用 JavaScript 的 DOM 操作来实现跳转。
可以尝试这样:
```html
<template>
<div>
<div v-for="(line, index) in lines" :key="index" v-bind:class="{'highlight': line.highlight}" v-on:click="gotoLine(index)">
{{line.text}}
</div>
</div>
</template>
<script>
export default {
data() {
return {
lines: [
{ text: 'Line 1', highlight: false },
{ text: 'Line 2', highlight: false },
{ text: 'Line 3', highlight: true },
// ...
]
}
},
methods: {
gotoLine(index) {
// 实现跳转到该行的代码
}
}
}
</script>
```
其中,在 methods 中实现gotoLine 函数,可以用 document.getElementById('line_'+index) 或者通过window.location.hash 来实现跳转
```
methods: {
gotoLine(index) {
var element = document.getElementById('line_'+index);
element.scrollIntoView();
}
}
```
需要注意的是需要为每一行元素添加一个唯一的 id 来进行定位。
```html
<div v-for="(line, index) in lines" :key="index" v-bind:class="{'highlight': line.highlight}" v-on:click="gotoLine(index)" :id="'line_'+index">
```
相关推荐
![](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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)