javascript - 通过 VueJS 选择 DOM 元素

标签 javascript html dom google-chrome-extension vuejs2

我使用清晰的 JavaScript 编写了一个 Chromium 扩展来与 DOM 交互,但现在我学习 VueJS 并重写了该扩展以使用 Vue。我发现一个问题:有一个<input>连接到 Vue 的元素。

我通过 bg.cp 更改其值Vue 实例的属性,现在我需要选择 DOM 元素。有没有办法使用 Vue 实例而不是使用 document.getElementById('test').select() 进行文本选择?

最终目标是复制 <input>字段到剪贴板。

<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>

最佳答案

可以在DOM属性中使用ref,并在js部分通过$refs调用

例如:

<input ref="inputName" />

并在js部分调用

this.$refs.inputName

在这里您可以阅读explanation其中

关于javascript - 通过 VueJS 选择 DOM 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57499630/

相关文章:

javascript - 在动画期间删除元素

javascript - html5 Canvas 和 javascript 的奇怪行为

css - 将多个css文件导入html页面

javascript - 更改div的innerHTML会清除整个内容

javascript - jQuery append in loop - DOM 直到最后才更新

javascript - JQuery 插件类不工作

javascript - 删除显示 HTML 字符的 elementFromPoint()

javascript - 测试全局 npm 模块的最佳方法

html - 使用位置 :fixed 时重置位置

javascript - 将脚本标签插入 DOM 时捕获 SyntaxError 异常