vue使用ref添加html

使用`ref`添加HTML，一般指在Vue组件中动态地将HTML代码插入到DOM中。可以通过`$refs`属性获取组件中的DOM元素，然后使用DOM操作添加HTML。

下面是一个例子，假设我们有一个`MyComponent`组件，需要在组件中添加一个`<div>`元素，并给它添加一个`ref`属性，然后在`mounted`钩子函数中使用`$refs`属性获取这个`<div>`元素，并将一段HTML代码插入到这个元素中：

<template>
  <div>
    <h1>My Component</h1>
    <div ref="myDiv"></div>
  </div>
</template>

<script>
export default {
  mounted() {
    const myDiv = this.$refs.myDiv
    myDiv.innerHTML = '<p>Hello World!</p>'
  }
}
</script>

在上面的例子中，我们使用了`ref="myDiv"`给`<div>`元素添加了一个`ref`属性，然后在`mounted`钩子函数中使用了`this.$refs.myDiv`获取了这个元素，并使用`innerHTML`方法将一个`<p>`元素插入到了这个元素中。

需要注意的是，`innerHTML`方法会将一个字符串解析为HTML代码，并插入到DOM中。因此，需要注意防止XSS攻击，确保插入的HTML代码是安全的。

相关问题

vue 使用 ref 添加删除类名

可以使用 `ref` 来获取元素的引用，然后使用 `classList` 对象来添加和删除类名。示例代码如下：

<template>
  <div>
    <button @click="toggleClass">Toggle Class</button>
    <div ref="myDiv" class="my-class">My Div</div>
  </div>
</template>

<script>
export default {
  methods: {
    toggleClass() {
      const myDiv = this.$refs.myDiv
      myDiv.classList.toggle('active')
    }
  }
}
</script>

<style>
.my-class {
  background-color: #eee;
  padding: 20px;
}

.active {
  background-color: #ccc;
}
</style>

在上面的示例中，我们使用 `ref="myDiv"` 来获取元素的引用，然后在 `toggleClass()` 方法中使用 `classList.toggle()` 来切换 `active` 类名。这样，每次单击按钮时，就会添加或删除 `active` 类名，从而改变元素的背景颜色。

vue使用ref修改一个元素的class

可以使用`this.$refs`来获取元素的引用，然后使用`classList`来修改元素的class。示例如下：

<template>
  <div ref="myDiv" class="my-class"></div>
</template>

<script>
export default {
  methods: {
    changeClass() {
      this.$refs.myDiv.classList.remove('my-class');
      this.$refs.myDiv.classList.add('new-class');
    }
  }
}
</script>

在上面的示例中，`changeClass`方法可以通过`this.$refs.myDiv`获取到引用，并且使用`classList`来删除`my-class`类，添加`new-class`类。