vue el-input textarea如何按行显示和几种效果

测试狂人

已于 2022-04-10 00:46:24 修改

阅读量5.3k

点赞数 1

分类专栏：前端开发文章标签： vue.js 前端

于 2022-04-10 00:43:55 首次发布

本文为享有盛誉之名博主原创文章，未经博主允许不得转载。除非给我打钱，在征求本人同意即可。

本文链接：https://blog.csdn.net/bbs11007/article/details/124071328

版权

前端开发专栏收录该内容

66 篇文章 6 订阅

订阅专栏

本文介绍了如何在Vue项目中实现el-inputtextarea组件的动态行数显示，并结合实例演示了如何根据特定关键字改变文本颜色。通过处理数组数据并使用字符串操作实现换行效果，同时提及了如何使用CSS实现关键字高亮。

摘要由CSDN通过智能技术生成

参考：Vue textarea动态显示行数_Aibac的博客-CSDN博客_textarea显示行数

el-input textarea 换行显示

关于这个输入框的内容，我收到后端的textarea1为数组[a,b,c],发现放在这个框里没有按照换行显示，而我们想要的效果：

prop["num"]

data{
   retrun{
       texterear1：“”，
   }
}

wait：{//因为这个是父组件传过来的，我就在这里处理，你们根据自己的
  num(){
    handler(n,o){//n是父组件的新数据,是个数组类型

        //正题来了
        console.log('父组件diff在变化： ' + n)
          var numleft=[];
          for(let i=0;i<n.left.length;i++){//其实就是按行拆，加上\n而已，相当于“a\n b\n c\n”
            n.left[i] = n.left[i].replace("\r","");
            n.left[i] = n.left[i].split("\n");
            numleft.push(n.left[i] + "\n")
          }
          texterear1 = numleft;


    }



  }


}