-
- <template>
- <div class="vertical-layout">
- <header>
- <h1>testPage</h1>
- <p>(1)第一行内容xxxxxxxxx(2)第二行内容xxxxxxx(3)第三行内容</p>
- </header>
- <main>
- <el-button @click="goToOtherPage">点击换行</el-button>
- <p v-html="content"> </p>
- </main>
- <footer>
- <p>Footer content goes here.</p>
- </footer>
- </div>
- </template>
- <script setup lang="ts">
- import { ref } from 'vue';
- // 引入 Element Plus 组件
- import { ElButton } from 'element-plus';
- const data = ref('(1)第一行内容xxxxxxxxx(2)第二行内容xxxxxxx(3)第三行内容');
- const content = ref('');
- const goToOtherPage = () => {
- //正则表达式 遇到字符串里面有() 就在括号后面换行
- content.value = data.value.replace(/((\d+))/g, match => `<br>${match}`)
- };
- </script>
- <style scoped>
- </style>