获取input的value值

最新推荐文章于 2024-07-03 02:56:59 发布

逝者如斯夫。

最新推荐文章于 2024-07-03 02:56:59 发布

阅读量1.2k

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_60323200/article/details/121513060

版权

vue 专栏收录该内容

17 篇文章

订阅专栏

这是一个关于Vue组件的示例，展示了如何创建一个带有输入框的头部组件。当用户在输入框中输入内容并按下回车键时，会触发`add`方法，将输入的值打印到控制台。在第二个示例中，使用了`v-model`来双向绑定输入框的值，并在`add`方法中直接访问`this.title`获取输入值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div class="todo-header">
    <input
      type="text"
      placeholder="请输入名称，按回车键确认"
      @keyup.enter="add"
    />
  </div>
</template>
<script>
export default {
  name: "MyHeader",
  methods: {
    add(event) {
      console.log(event.target.value);
    },
  },
};
</script>

<template>
  <div class="todo-header">
    <input
      type="text"
      placeholder="请输入名称，按回车键确认"
      v-model="title"
      @keyup.enter="add"
    />
  </div>
</template>
<script>
export default {
  name: "MyHeader",
  data() {
    return {
      title: "",
    };
  },
  methods: {
    add() {
      console.log(this.title);
    },
  },
};
</script>