Question

我尝试使用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>

但它不能发挥我认为错误的功能。

Answer 1

根据我的评论，您的代码存在多处错误（基于问题的第一个版本，您可以在多个继承中对其进行编辑）：

您的el值不正确。使用#app代替app
您在标记中遗漏了<div id="app">，因此您的应用永远不会被Vue-ified。
您在代码中某处遗漏了}，导致语法错误

关于您的问题，由于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>

我如何使用textarea的vuejs计算新行？

1 个答案: