您现在的位置是：网站首页> 编程资料编程资料

Vue中的文字换行问题_vue.js_

2023-05-24 421人已围观

简介 Vue中的文字换行问题_vue.js_

Vue中数据单向绑定的文字换行怎么搞？

两个关键 /n+white-space: pre-wrap;

换行样式绑定给需要换行的父元素

Vue文本中的\n 、＜br＞进行换行显示

效果图

1.br换行可以使用v-html

 data() {    return {      activeName: 'first',      info: '1、优化批量上传图片
2、优化时间'    }  },

2.\n 换行

 
{{ info }}
  data() {    return {      info: '1、优化图片\n2、优化时间\n'    }  },

3.把br替换成\n换行

{{changeLine(info)}}
 data(){     return{         info: '1、优化批量上传图片
2、优化时间'     } }, methods:{     changeLine(str){         return str.replace(/
/g,'\n')     } }

补充：点击查看详细解释 white-space 

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

您可能感兴趣的文章:

上一篇：一文详解preact的高性能状态管理Signals_javascript技巧_

下一篇：利用TypeScript从字符串字面量类型提取参数类型_javascript技巧_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网