如何通过vue3中的console.log按钮输入数据并打印

how to input data and print it via console.log button in vue3

嗨,我在使用 React 之前了解 Vue 结构 我的问题是如何将此反应代码实现到 vue 3?

function App() ={
const [print, setPrint] = useState('')
return(
 <div>
   <input type='text' placeholder='input text her' 
   value={print} onChange={e=>setPrint(e.target.value)/>
   <button onClick={()=>console.log(print)}> click me </button>

 </div>

}

你们能解释一下 vue thant react 的结构吗?

注意:我正在 vue 中构建一个 POST 请求,所以这就是为什么我需要存储这个和空字符串变量

提前致谢!

您可以使用 v-model 为输入值进行双向数据绑定,并使用 @click 事件调用打印输入值的函数,如下所示,

<script setup>
import { ref } from 'vue'

const msg = ref("");  
  
const fnCall = (event) =>{
  //event is the native DOM even
  console.log(event);
  console.log(msg.value);
}
</script>

<template>
  <input v-model="msg" placeholder='input text her' >
  <button @click="fnCall">Click</button>
</template>