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

Question

我正在尝试运行单击按钮时的功能。

和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 上显示相同的数据。

Answer 1

您应该定义 2 个引用，然后在点击事件发生时从另一个更新其中一个

<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>

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

vue js how to copy value from textbox to div

javascript

vue.js

vuejs2

vuejs3