javascript - vue里怎样获取指定的class下的元素，并修改dom里的值？

Question

<div class="cell-group">
    <span>
        {{content}}
    </span>
</div>

cell-group是一个标题的class，想用函数过滤span里的文本

在vue里怎样获取全部的cell-group（不同的组件）dom，并修改dom里的值

Answer 1

既然你都使用vue这种双向绑定的框架了，除非有必要的情况下不要对DOM直接进行操作

<template>
  <div class="cell-group">
    <span>{{ processedContent }}</span>
  </div>
</template>

<script>
export default {
  name: 'New',
  data() {
    return {
      content: '这是span标签里的文本'
    }
  },
  computed: {
    processedContent() {
      // 在这里对文本进行处理
      return this.content.toUpperCase();
    }
  }
}
</script>

Answer 2

const cellGroupSpanList = doucment.querySelectorAll(".cell-group > span");
cellGroupSpanList.forEach(dom => dom.innerHTML = "xxxx");