uniapp中怎么操作dom

在uni-app框架中，操作DOM（Document Object Model）主要是通过Vue.js提供的API来进行的。Uni-app底层基于Vue，所以你可以使用Vue的模板语法、v-bind、v-on指令以及Vue组件的生命周期钩子函数来直接操作DOM。

以下是一些基本的操作DOM的方法：

1. **获取元素**: 使用`this.$refs`属性，如果在一个组件内部引用了一个HTML元素，可以用`ref="elementName"`绑定，然后通过`this.$refs.elementName`获取该元素。

<template>
  <div ref="myDiv"></div>
</template>

<script>
export default {
  mounted() {
    const div = this.$refs.myDiv; // 获取到<div>元素
  }
}
</script>

2. **修改元素内容**: 可以使用`.innerHTML`或者`.text`属性设置元素的内容。

this.$refs.myDiv.innerHTML = '新的内容'; // 或者
this.$refs.myDiv.textContent = '新的文本';

3. **添加或删除类名**: 可以使用`.classList.add()`和`.classList.remove()`方法来动态切换类。

this.$refs.myDiv.classList.add('newClass');
this.$refs.myDiv.classList.remove('oldClass');

4. **事件监听和触发**: Vue提供了`@click`, `v-on`等处理DOM事件的方式。

<button v-on:click="handleClick">点击我</button>

<script>
methods: {
  handleClick() {
    this.$refs.myDiv.style.color = 'red'; // 触发后改变颜色
  }
}
</script>