用VueJS将变量与querySelector连接起来

以下是一个使用Vue.js将变量与querySelector连接起来的示例代码：

HTML:

<div id="app">
  <input type="text" v-model="selector">
  <button @click="getElement">Get Element</button>
  <p>Selected Element: {{ selectedElement }}</p>
</div>

JavaScript:

new Vue({
  el: '#app',
  data: {
    selector: '',
    selectedElement: null
  },
  methods: {
    getElement() {
      // 使用querySelector获取选择的元素
      this.selectedElement = document.querySelector(this.selector);
    }
  }
})

在上面的示例中，我们有一个输入框和一个按钮。用户可以在输入框中输入CSS选择器，然后点击按钮以获取选择的元素。使用v-model指令将输入框的值绑定到Vue实例的selector属性上。当用户点击按钮时，getElement方法会被调用。在该方法中，我们使用document.querySelector方法将CSS选择器传递给querySelector，并将返回的元素赋值给Vue实例的selectedElement属性。最后，我们在页面上显示所选择的元素。