在Vue 3中，操作DOM可以通过以下四种方式实现：
- 模板指令: 使用内置指令如
v-if,v-for,v-show等来操作DOM元素的显示。
<template>
<div>
<p v-if="show">This will be displayed if show is true</p>
<p v-show="show">This will be displayed no matter what</p>
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
show: true,
items: ['Item 1', 'Item 2', 'Item 3']
};
}
};
</script>- Ref属性: 使用
ref属性在模板中标记一个元素，并通过组件的$refs对象访问该DOM元素。
<template>
<div>
<input ref="inputRef" type="text">
<button @click="focusInput">Focus Input</button>
</div>
</template>
<script>
export default {
methods: {
focusInput() {
this.$refs.inputRef.focus();
}
}
};
</script>- Composition API: 使用
setup函数内的ref和onMounted等函数来操作DOM。
<template>
<div>
<input ref="inputRef" type="text">
</div>
</template>
<script>
import { ref, onMounted } from 'vue';
export default {
setup() {
const inputRef = ref(null);
onMounted(() => {
inputRef.value.focus();
});
return { inputRef };
}
};
</script>- 原生JavaScript: 在模板中使用事件监听器调用原生JavaScript函数来操作DOM。
<template>
<div>
<input type="text" @focus="handleFocus">
</div>
</template>
<script>
export default {
methods: {
handleFocus(event) {
// 操作DOM
console.log(event.target.value);
}
}
};
</script>以上四种方式是Vue 3中操作DOM的常见手段，开发者可以根据实际情况选择合适的方法。