vue实时显示textarea字数_Vue 实时显示输入的字数

可以通过监听textarea的input事件来实现实时显示输入的字数，然后将字数绑定到Vue实例的一个变量上，再在页面中显示出来。以下是一个示例代码：

<template>
  <div>
    <textarea @input="onInput"></textarea>
    <p>已输入{{textLength}}个字</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      textLength: 0,
    };
  },
  methods: {
    onInput(event) {
      this.textLength = event.target.value.length;
    },
  },
};
</script>

在上面的代码中，我们监听了textarea的input事件，并在事件处理函数中更新了textLength变量的值，然后将其显示在页面上。这样就可以实现实时显示输入的字数了。

相关问题

vue实时监听多个textarea文本框的输入字数

你可以通过使用 `v-model` 指令和 `watch` 属性来实时监听多个 textarea 文本框的输入字数。

首先，为每个 textarea 绑定不同的 `v-model`，以便在 Vue 实例中使用。例如：

<textarea v-model="text1"></textarea>
<textarea v-model="text2"></textarea>

然后，你可以使用 `watch` 属性来监听每个 textarea 绑定的 `v-model` 的值，并计算它们的长度。可以使用一个计算属性来返回总字数。例如：

data() {
  return {
    text1: '',
    text2: ''
  }
},
watch: {
  text1: function(newVal) {
    this.text1Length = newVal.length;
  },
  text2: function(newVal) {
    this.text2Length = newVal.length;
  }
},
computed: {
  totalLength: function() {
    return this.text1Length + this.text2Length;
  }
}

在上面的代码中，我们定义了 `text1` 和 `text2` 的 `watch` 属性来实时监听它们的值，并将它们的长度存储在 `text1Length` 和 `text2Length` 中。然后我们用一个计算属性 `totalLength` 来返回这两个长度的总和。

最后，你可以在模板中使用计算属性来显示总字数：

<p>Total length: {{ totalLength }}</p>

这样，每次你输入或删除文本时，总字数都会实时更新。

vue显示textarea类型怎么隐藏

要隐藏Vue中的textarea，你可以使用CSS样式中的"display: none"属性。具体实现方法如下：

1. 在Vue组件的模板中，给textarea添加一个id属性，例如：

<template>
  <div>
    <textarea id="myTextarea"></textarea>
  </div>
</template>

2. 在Vue组件的样式表中，为该id添加"display: none"属性，例如：

<style>
#myTextarea {
  display: none;
}
</style>

这样，该textarea就会被隐藏起来，不会在页面中显示。