我如何使用来自 textarea 的 vuejs 计算新行？答案

【问题标题】：How do i count new lines with vuejs from textarea?我如何使用来自 textarea 的 vuejs 计算新行？
【发布时间】：2017-08-26 23:10:16
【问题描述】：

我尝试使用 vuejs 计算 textarea 中的新行我有这个 textarea

<textarea v-model="modelarea" v-on:keyup="show"> </textarea>

vuejs 代码

    new Vue({
    data:{
       modelarea:''
         },
      methods: {        
      show: function(){
                var length = 0;
                for(var i = 0; i < this.modelarea.length; ++i){
                if(this.modelarea[i] == '\n') {
        length++;
     }
}

      }
    })

并回应它

<label>{{ length }}</label>

但我认为错误的功能不起作用。

【问题讨论】：

您的应用选择器一开始就错了：您的意思是 el: '#app' 吗？您应该使用this.modelarea.length 而不是modelarea.length。 str 指的是什么？此外，您的 JS 似乎缺少一个大括号 - 检查您的浏览器控制台是否有错误消息。
最重要的是，您错误地使用了v-model：您应该使用v-model="modelarea"。阅读文档：vuejs.org/v2/guide/forms.html

标签： html vue.js

【解决方案1】：

根据我的评论，您的代码存在几个错误（基于您的问题的第一个版本，然后您多次连续编辑它）：

您的el 值不正确。使用#app 而不仅仅是app
您的标记中缺少<div id="app">，因此您的应用永远不会被 Vue 化。
您的代码中某处缺少尾随 }，从而导致语法错误

关于您的问题，由于v-model 实际上会实时更新modelarea 值，因此您无需将额外的keyup 侦听器绑定到您的<textarea>。您需要的只是一个计算属性，它可以获取modelarea 字符串中的新行数（这已在另一个SO 问题中得到解决：How to count the number of lines of a string in javascript）。请记住，所有这些变量/道具都是反应性的:)

换句话说，你可以简单地使用el、data和computed，仅此而已。请参阅下面的概念验证示例：

new Vue({
  el: '#app',
  data: {
    modelarea: ''
  },
  computed: {
    lineCount: function() {
      // Return number of lines using regex if not empty
      return this.modelarea.length ? this.modelarea.split(/\r\n|\r|\n/).length : 0;
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
  <textarea v-model="modelarea"></textarea>
  <span>Number of lines: {{ lineCount }}</span>
</div>

【讨论】：