vue js如何将值从文本框复制到div

Posted 2023-02-16

【中文标题】vue js如何将值从文本框复制到div

【英文标题】：vue js how to copy value from textbox to div

【发布时间】：2022-01-04 13:17:09

【问题描述】：

我正在尝试在单击按钮时运行函数。

和text box one value 应该显示在div

模板代码：

<input v-model="textdata" type="text" class="w-full rounded">

<div class="bg-white h-10 w-full  ">textdata</div>

<button @click="getvalue" class="bg-green-800  rounded " >RECEIVE</button>

VUSJS：

<script>
import  defineComponent  from 'vue'

export default defineComponent(
  setup() 

function getvalue()
    console.log(this.textdata)
    

return
    getvalue,




 
)
</script>

现在它在控制台中显示数据，但是我如何在 div 上显示相同的数据。

【参考方案1】：

您应该定义 2 个 ref，然后在单击事件时从另一个更新其中一个

<script>
import  defineComponent, ref  from 'vue'

export default defineComponent(
  setup() 
    const textarea = ref("");
    const text = ref("");

    function getvalue()
      this.text = this.textarea
    

    return
        getvalue,
        text,
        textarea,
    
  

)
</script>

<template>
  <input v-model="textarea" type="text" class="w-full rounded">
  <div class="bg-white h-10 w-full">text</div>

  <button @click="getvalue" class="bg-green-800  rounded " >RECEIVE</button>
</template>

【讨论】：

谢谢你成功了，你能告诉我如果我有输入的图像文件并且我想在 div 上显示它，它会不会工作？

我相信这是可能的。请考虑创建一个新问题，我很乐意提供帮助（因为这是一个单独的问题）

我创建了新问题，请检查。

您分享的新问题与您在 cmets 中提到的问题无关，但我已经给出了答案。