Vue如何为动态创建的DOM元素添加指令？

Great question! Since you're building your centerIconDiv with vanilla JS instead of Vue's template system, you can't use v-if, v-show, or :class directly—but Vue's reactivity system lets you replicate exactly those behaviors programmatically. Here's how to do it for each directive you mentioned:

Simulating v-show (Toggle Visibility Without Destroying the Element) #

v-show works by toggling the display CSS property. You can replicate this with a reactive ref and a watcher to update the element's style whenever the ref changes:

import { ref, watch } from 'vue';

// Your original element creation code
let centerIconDiv = document.createElement('div');
centerIconDiv.className += 'centerIcon box-shadow m-2 rounded-2';
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(centerIconDiv);

// Reactive state to control visibility
const isIconVisible = ref(true);

// Watch for state changes and update the element
watch(isIconVisible, (newVisibility) => {
  centerIconDiv.style.display = newVisibility ? 'block' : 'none';
});

// Later, you can toggle it like this:
// isIconVisible.value = false;

Simulating v-if (Destroy/Recreate the Element) #

v-if adds or removes the element from the DOM entirely. For this, you'll need to watch your reactive state and manipulate the Google Maps controls collection to add or remove the element:

import { ref, watch } from 'vue';

const isIconRendered = ref(true);
const controlPosition = google.maps.ControlPosition.TOP_RIGHT;

// Initial element setup (only if state is true)
if (isIconRendered.value) {
  let centerIconDiv = document.createElement('div');
  centerIconDiv.className += 'centerIcon box-shadow m-2 rounded-2';
  map.controls[controlPosition].push(centerIconDiv);
}

// Watch for state changes to add/remove the element
watch(isIconRendered, (shouldRender) => {
  const controls = map.controls[controlPosition];
  
  if (shouldRender) {
    // Recreate and add the element
    const newIconDiv = document.createElement('div');
    newIconDiv.className += 'centerIcon box-shadow m-2 rounded-2';
    controls.push(newIconDiv);
    // Update the reference to the new element
    centerIconDiv = newIconDiv;
  } else {
    // Find and remove the existing element from controls
    for (let i = 0; i < controls.getLength(); i++) {
      if (controls.getAt(i) === centerIconDiv) {
        controls.removeAt(i);
        break;
      }
    }
  }
});

Simulating :class (Dynamic Class Binding) #

For dynamic class names, you can use a computed property to generate the class string, then watch it to update the element's className. Or use classList for more granular control:

Option 1: Using a Computed Property #

import { ref, computed, watch } from 'vue';

const isIconActive = ref(false);

// Computed property that returns the full class list
const iconClasses = computed(() => {
  const baseClasses = ['centerIcon', 'box-shadow', 'm-2', 'rounded-2'];
  if (isIconActive.value) baseClasses.push('active-icon');
  return baseClasses.join(' ');
});

// Initialize the element's classes
let centerIconDiv = document.createElement('div');
centerIconDiv.className = iconClasses.value;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(centerIconDiv);

// Update classes whenever the computed property changes
watch(iconClasses, (newClasses) => {
  centerIconDiv.className = newClasses;
});

// Toggle active state later:
// isIconActive.value = true;

Option 2: Using classList (More Efficient for Toggles) #

import { ref, watch } from 'vue';

const isIconActive = ref(false);

let centerIconDiv = document.createElement('div');
centerIconDiv.className += 'centerIcon box-shadow m-2 rounded-2';
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(centerIconDiv);

// Watch for active state changes to add/remove the class
watch(isIconActive, (isActive) => {
  if (isActive) {
    centerIconDiv.classList.add('active-icon');
  } else {
    centerIconDiv.classList.remove('active-icon');
  }
});

Bonus: Mount a Small Vue App to the Element (If You Want Template Syntax) #

If you'd prefer to use actual Vue directive syntax instead of manual DOM manipulation, you can mount a tiny Vue app directly to your centerIconDiv. This lets you use v-show, :class, and even @click without writing vanilla JS handlers:

import { createApp, ref } from 'vue';

// Create a mini Vue component
const IconComponent = {
  setup() {
    const isVisible = ref(true);
    const toggleVisibility = () => {
      isVisible.value = !isVisible.value;
    };
    return { isVisible, toggleVisibility };
  },
  template: `
    <div 
      class="centerIcon box-shadow m-2 rounded-2"
      v-show="isVisible"
      :class="{ 'active-icon': isVisible }"
      @click="toggleVisibility"
    >
      <!-- Add your icon content here (e.g., <svg> or text) -->
    </div>
  `
};

// Mount the component to your manually created div
const app = createApp(IconComponent);
const mountedElement = app.mount(document.createElement('div'));

// Add the mounted Vue element to the Google Maps controls
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(mountedElement.$el);

The core idea here is leveraging Vue's reactivity system (ref, computed, watch) to sync your state with manual DOM operations—this gives you the same flexibility as Vue directives without relying on template rendering.

内容的提问来源于stack exchange，提问作者Philipp Mochine