Vue에서 요소의 내용을 얻는 방법

Vue에서 요소 콘텐츠를 가져오는 방법은 다음과 같습니다. textContent: 줄 바꿈 및 텍스트 노드를 포함한 모든 텍스트 콘텐츠를 가져옵니다. innerText: 줄 바꿈 및 텍스트 노드를 제외한 시각적 텍스트 콘텐츠를 가져옵니다. innerHTML: HTML 코드 및 텍스트를 포함한 모든 콘텐츠를 가져옵니다.

Vue에서 요소 콘텐츠를 가져오는 방법

Vue에서는 요소의 콘텐츠를 가져오는 여러 가지 방법이 있습니다.

.textContent

.textContent 속성은 모든 콘텐츠를 가져옵니다. 요소에는 줄 바꿈 및 텍스트 노드를 포함한 텍스트 콘텐츠가 포함되어 있습니다. .textContent 属性获取元素中所有包含的文本内容，包括换行符和文本节点。

<code><template>
  <div id="my-element">
    Hello, world!
    <br>
    This is some text.
  </div>
</template>

<script>
  export default {
    mounted() {
      const element = this.$refs.myElement;
      console.log(element.textContent); // 输出：Hello, world!
                                          // This is some text.
    }
  }
</script></code>

.innerText

.innerText 属性获取元素中可视的文本内容，不包含换行符和文本节点。

<code><template>
  <div id="my-element">
    Hello, world!
    <br>
    This is some text.
  </div>
</template>

<script>
  export default {
    mounted() {
      const element = this.$refs.myElement;
      console.log(element.innerText); // 输出：Hello, world! This is some text.
    }
  }
</script></code>

.innerHTML

.innerHTML

<code><template>
  <div id="my-element">
    Hello, world!
    <br>
    This is some text.
  </div>
</template>

<script>
  export default {
    mounted() {
      const element = this.$refs.myElement;
      console.log(element.innerHTML); // 输出：<div id="my-element">
                                          // Hello, world!<br>
                                          // This is some text.
                                          // </div>
    }
  }
</script></code>

.innerText🎜🎜.innerText 속성은 줄 바꿈 및 텍스트 노드를 제외하고 요소에서 표시되는 텍스트 콘텐츠를 가져옵니다. 🎜rrreee🎜.innerHTML🎜🎜 .innerHTML 속성은 HTML 코드 및 텍스트를 포함하여 요소의 모든 콘텐츠를 가져옵니다. 🎜아아아아

위 내용은 Vue에서 요소의 내용을 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!