textarea回车空格处理成html标签

直接上全代码

<template>
  <div>
    <div>
      <el-input
        type="textarea"
        :autosize="{ minRows: 2, maxRows: 4}"
        placeholder="请输入内容"
        @input="Fninput"
        v-model="textarea2">
      </el-input>
    </div>
    <div>
      直接渲染：{{textarea2}}
    </div>
    <div>
      直接渲染：
      <div v-html="textarea2"></div>
    </div>
    <div>
      html：
      <div v-html="textareahtml"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'demo',
  data () {
    return {
      textarea2:'',
      textareahtml:'',
    }
  },
  methods:{
    Fninput(name){
      console.log(name,'-------------',this.textarea2);
      this.textareaP(name)
      console.log();
    },
    textareaP(centent){//转换为html样式
      centent = centent.replace(new RegExp(' ', 'gm'), '&nbsp;') // gm 全局替换
      const arr = []
      centent.split('\n').forEach(item => {
          arr.push(`<p>${item.trim()}</p>`)
      })
      this.textareahtml = arr.join('')
      console.log(centent,'处理后的内容显示');
    }
  }
}
</script>
<style lang="stylus" scoped>

</style>