vue怎样保存一个dom节点，然点击按钮锁定该输入框

在Vue.js中，你可以通过数据绑定和JavaScript操作DOM来实现这个功能。首先，你需要创建一个变量来存储DOM节点，然后在模板中将这个节点绑定到Vue实例上。例如，假设有一个输入框元素`<input v-model="inputValue" />`，你想保存它并给一个“锁定”按钮添加事件监听。

1. **创建变量存储节点**:

<input type="text" ref="myInput" v-model="inputValue" />
<button @click="lockInput">锁定</button>

这里我们使用了`ref`属性来关联Vue实例的一个数据属性，比如`this.myInput`。

2. **在Vue实例中获取和保存节点**:

export default {
  data() {
    return {
      inputValue: '',
      locked: false,
      inputNode: null, // 用于保存节点
    };
  },
  mounted() {
    this.inputNode = this.$refs.myInput;
  },
};

3. **点击事件处理函数**:
在这个函数中，你可以检查是否已经锁定，如果未锁定则锁定输入框，并阻止默认行为（防止文本自动填充）：

methods: {
  lockInput() {
    if (!this.locked) {
      this.locked = true; // 锁定
      this.inputNode.readOnly = true; // 设置输入框只读
      this.inputNode.addEventListener('input', function(e) { e.preventDefault(); }); // 阻止输入
    } else {
      this.locked = false; // 解锁
      this.inputNode.readOnly = false;
      this.inputNode.removeEventListener('input', function(e) { e.preventDefault(); });
    }
  },
},

现在，当你点击“锁定”按钮时，输入框会被锁定，只有在再次点击或手动解除锁定才会恢复正常。