logo标签列表

通过VueJS选择DOM元素

javascripthtmldomgoogle-chrome-extensionvuejs2
5

我使用纯JavaScript编写了一个与DOM交互的Chromium扩展程序，但现在我正在学习VueJS，并重新编写了扩展程序以使用Vue。我发现一个问题：有一个与Vue连接的元素。

我通过Vue实例的bg.cp属性更改其值，现在我需要选择DOM元素。是否有一种方法可以使用Vue实例进行文本选择，而不是使用document.getElementById('test').select()？

最终目标是将字段复制到剪贴板中。

<body>
  <div id="appBg">
    <input v-model="cp" id="test">
  </div>
  <script>
  //vue instance of div with input field
  var bg = new Vue({
      el: "#appBg",
      data: {
        cp: ""
      }
    });
  </script>
</body>
将一个**引用(reference)**添加到元素上，然后通过这种方式访问它 - https://vuejs.org/v2/api/#vm-refs 或 https://codingexplained.com/coding/front-end/vue-js/accessing-dom-refs - muka.gergely
1个回答
8
你可以在DOM属性中使用ref，在js部分通过$refs来调用它。
例如：
<input ref="inputName" />

在 JavaScript 部分调用

this.$refs.inputName

在这里，您可以阅读关于它的解释

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接