如何通过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>
嗨,我在使用 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>