Javascript Vuejs如何使用innerHtml更改元素内容

您好，我想知道在单击按钮时如何更改innerHtml

在Vanilla Javascript中，我可以通过以下方式访问元素：

const score=document.querySelector'score'

通过这样做来改变它：

score.innerHtml=13

差不多吧

<template>
  <div id="scoreboard">
    <h4>{{header_my}}</h4>
    <button v-on:click="changeH3()">Change</button>
    <h3 id="score">0</h3>
  </div>
</template>

<script>
export default {
  name: "scoreboard",
  data() {
    return {
      header_my: "Hello Wolrd"
    };
  },
  methods: {
    changeH3() {
      const h3 = document.querySelector("#score");
      h3.innerHtml = "12";
    }
  }
};
</script>

---

调用changeH3时，如何执行此操作？id为score的h3的innerHtml必须更改为12。

使用Vue.js时不应直接操作DOM。首先定义分数数据属性。Vue知道您何时更改分数，并将进行DOM操作以更新视图

新Vue{ el:记分牌， 资料{ 返回{ 头：你好，沃尔德， 分数：0 }; }, 方法：{ 兑换券{ 这个分数=12； } } }; 改变 {{score}}

---

因此，在使用vue时，我不能使用innerHtml和appendChild？当然可以，但应该使用vue样式，在孩子身上使用v-show或v-if，并有条件地显示孩子。这并不能回答问题。