我正在使用Vue.js
and制作一个项目Nuxt.js
。我prismjs
用于在我的页面上突出显示代码片段。我已经按照这里prismjs
给出的安装了。
这是我的plugins/prism.js
文件:
import Vue from "vue";
import Prism from "vue-prism-component";
import "prismjs";
import "prismjs/components/prism-c";
import "prismjs/components/prism-cpp";
import "prismjs/components/prism-java";
import "prismjs/components/prism-python";
import "assets/syntax-theme.css";
import "prismjs/plugins/line-numbers/prism-line-numbers.min";
import "prismjs/plugins/line-numbers/prism-line-numbers.css";
import "prismjs/plugins/line-highlight/prism-line-highlight.min";
import "prismjs/plugins/line-highlight/prism-line-highlight.css";
Vue.component("prism", Prism);
这是我的 Vue 组件:
<template>
<div>
<!-- other content -->
<prism language="c" class="line-numbers" :data-line="i">{{codeC}}</prism>
<b-pagination :total-rows="n" per-page="1" v-model="i"></b-pagination>
</div>
</template>
<script>
export default {
data() {
return {
n: 5,
i: 1,
codeC:
'int linearSearch(int arr[], int n, int x) {\n' +
' for (int i = 0; i < n; i++) {\n' +
' if (arr[i] == x) {\n' +
' return i;\n' +
' }\n' +
' }\n' +
' return -1;\n' +
'}'
}
}
}
</script>
我的问题是,当 i 的值从分页发生变化时,必须突出显示的行号不会改变。怎么了?变化i
会反映在其他内容中。