Vue3: 获取input标签数据

原创已于 2023-05-16 14:50:33 修改 · 6.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

于 2022-12-12 00:20:16 首次发布

vue3学习笔记专栏收录该内容

21 篇文章

订阅专栏

本文介绍了一个使用Vue框架创建的简单搜索组件。该组件包括一个文本输入框和一个按钮，通过@click事件触发搜索功能，并在控制台打印输入框的值。文章展示了如何利用Vue的响应式特性来处理用户输入。

<template>
	<input  type="text" v-model="searchInputText" />
 	<a-button @click="search">搜索</a-button>
</template>      
  import { defineComponent, ref, reactive } from 'vue';
  import { fetchCategories } from "@/api/toolList";

  export default defineComponent({
    name: 'Search',
    emits:['changeCategory'],
    setup(props,ctx) {
      const searchInputText = ref(null)
      function search(){
        // 输入框的数据
        console.log(searchInputText.value)
      }
      return {
        searchInputText
      };
   }
})