如何提取v-model绑定输入框的值？CodePen示例技术问询

云原生阿岚

2026-5-9

当然可以提取这个输入框里的特定文本值啦！不过因为这是Vue绑定的输入框，我们有两种实用的思路，一种是用原生JavaScript方法直接操作DOM，另一种是利用Vue本身的数据绑定特性来获取，下面分别给你拆解：

方法一：原生JavaScript获取值

如果想用getElementById或者其他原生DOM方法，操作起来很简单：

要是你愿意给输入框加个ID，那用getElementById最直接：
先修改输入框的代码，加上ID：

<td><input id="usernameInput" class="input" v-model="user.name" /></td>

然后用JS获取值：

const inputValue = document.getElementById('usernameInput').value;
console.log(inputValue); // 就能拿到你输入的a、b、c这类内容啦

不想加ID也没关系，还可以通过class或者父元素来精准定位：

// 通过class选择器获取（如果页面只有这一个.input的话）
const inputValue = document.querySelector('.input').value;
// 要是有多个.input，就结合父元素td来定位
const inputValue = document.querySelector('td .input').value;

方法二：利用Vue自身特性获取（更推荐）

因为这个输入框用了v-model="user.name"，说明它已经和Vue实例里的user.name双向绑定了，其实直接访问这个数据属性就能拿到值，这也是Vue项目里更推荐的方式，避免直接操作DOM：

如果是在Vue组件的方法里，直接用this.user.name就能获取：

methods: {
  fetchInputValue() {
    const inputValue = this.user.name;
    console.log(inputValue); // 轻松拿到输入的内容
  }
}

如果是在控制台调试或者Vue实例外部，假设你的Vue实例挂载在#app节点上，可以这样获取：
```
const vueInstance = document.querySelector('#app').__vue__;
console.log(vueInstance.user.name);
```