用vue3写一个多行文本输入框,并且显示为密文

可以使用 Vue 3 的 Composition API 和原生 HTML 的 `<textarea>` 元素来实现多行文本输入框，再通过绑定 `v-model` 实现双向数据绑定，最后使用计算属性来实现显示为密文的效果。

以下是示例代码：

<template>
  <div>
    <textarea v-model="text"></textarea>
    <div>{{ hiddenText }}</div>
  </div>
</template>

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

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

    // 计算属性，将文本内容转化为密文
    const hiddenText = computed(() => {
      return text.value.replace(/./g, '*');
    });

    return {
      text,
      hiddenText,
    };
  },
};
</script>

<style>
textarea {
  width: 100%;
  height: 100px;
}
</style>

在上面的示例中，我们使用了 `ref` 函数来创建一个响应式的 `text` 变量，并在 `<textarea>` 元素上绑定了 `v-model="text"`，这样就可以实现双向数据绑定。同时，我们还使用了 `computed` 函数来创建一个计算属性 `hiddenText`，该计算属性会将 `text` 变量中的所有字符替换为 `*`，从而实现显示为密文的效果。最后，我们在模板中将 `hiddenText` 变量渲染到一个 `<div>` 元素中，用于显示密文内容。

在样式中，我们设置了 `<textarea>` 元素的宽度为 100%，高度为 100px，使其能够显示多行文本输入框。