vue.js清空input

<template>
<div id="app">
<input v-model="inputValue" placeholder="请输入内容">
<button @click="clearInput">清空输入框</button>
</div>
</template>

<script>
export default {
data() {
return {
inputValue: ''
};
},
methods: {
clearInput() {
this.inputValue = '';
}
}
};
</script>

<template>
<div>
<input v-model="inputValue" placeholder="请输入内容">
<button @click="clearInput">清空输入框</button>
</div>
</template>

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

export default {
setup() {
const inputValue = ref('');

function clearInput() {
inputValue.value = '';
}

return {
inputValue,
clearInput
};
}
};
</script>

<template>
<div>
<input ref="myInput" placeholder="请输入内容">
<button @click="clearInput">清空输入框</button>
</div>
</template>

<script>
export default {
methods: {
clearInput() {
this.$refs.myInput.value = '';
}
}
};
</script>