Vue是一個流行的基于組件的JavaScript框架,它在現代Web應用中廣泛應用。Vue中的文本渲染使用“Mustache”語法,它可以很方便地呈現靜態文本內容,但是在需要獲取文本中的換行時,就需要使用Vue的實例方法。
<template>
<div>
<p>這是第一行。</p>
<p>這是第二行。</p>
</div>
</template>
<script>
export default {
mounted() {
const paragraphElements = this.$el.querySelectorAll('p')
paragraphElements.forEach((paragraph) => {
const paragraphText = paragraph.textContent
const lineBreaks = paragraphText.match(/\n/g)
console.log(lineBreaks)//輸出:['\n']
})
},
}
</script>
在這個例子中,我們首先在Vue的模板中定義了兩個段落標簽,并分別填入兩行文本。然后,在Vue的實例方法中,我們使用querySelectorAll()方法,以獲取所有的段落元素。
接下來,我們遍歷每個段落元素,并獲取其textContent屬性。為了獲取換行符的個數,我們使用了正則表達式,其內容為“\n”,它可以匹配文本中的回車符。最后,我們將換行符的個數輸出到控制臺,以便調試和測試。
上一篇vue獲取接口