vue 保存dom节点内容

你可以使用 Vue 的 `$refs`，通过给需要保存内容的 DOM 元素添加 `ref` 属性来获取对该元素的引用，然后在 Vue 实例中定义一个变量，将该元素的内容赋值给该变量即可。例如：

HTML 代码：

<div ref="myDiv">这是需要保存的内容</div>

Vue 实例中的代码：

export default {
  data() {
    return {
      savedContent: ''
    }
  },
  mounted() {
    this.savedContent = this.$refs.myDiv.innerHTML
  }
}

在上面的例子中，`savedContent` 就是保存的内容，当组件挂载完成后，会将 `myDiv` 元素的内容赋值给 `savedContent` 变量。

相关问题

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(); });
    }
  },
},

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

vue3 onMounted 取dom 节点出错

在 Vue 3 中，通过onMounted钩子获取DOM节点，需要使用ref元素进行引用。具体步骤如下：

1. 在template中使用ref引用DOM节点：

<template>
  <div>
    <div ref="myDiv">这是一个div</div>
  </div>
</template>

2. 在setup函数中使用onMounted钩子获取DOM节点：

<script>
import { onMounted, ref } from 'vue'

export default {
  setup() {
    const myDiv = ref(null)

    onMounted(() => {
      console.log(myDiv.value) // 这里可以获取到DOM节点
    })

    return {
      myDiv
    }
  }
}
</script>

注意：在获取DOM节点时需通过`myDiv.value`取值。