我試圖在單擊按鈕時運行功能。
并且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 上顯示相同的資料。
uj5u.com熱心網友回復：
您應該定義 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>
uj5u.com熱心網友回復：
如果您希望這些變數具有反應性，請執行以下操作。
<script>
export default {
name: "App",
data() {
return {
textdata: undefined,
};
},
};
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/368241.html
標籤：javascript Vue.js Vuejs2 Vuejs3
上一篇：將prop物件克隆為新的資料物件