Vue中如何实现字符串换行

 更新时间:2023年10月19日 10:39:30   作者:呈两面包夹芝士  
这篇文章主要介绍了Vue中如何实现字符串换行问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue字符串换行

先上效果图:

数据格式:字符串

代码如下:

<template>
      <div style="margin-top:20px">
        <el-table :data="tableData" style="width: 100%" border >
          <el-table-column
            prop="parameter"
            label="参数"
          ></el-table-column>
          <el-table-column
            prop="type"
            label="类型"
          ></el-table-column>
          <el-table-column
            prop="describe"
            label="描述"
          ></el-table-column>
        </el-table>
      </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          parameter: "parameter1",
          type: "String",
          describe: "类名",
        },
        {
          parameter: "parameter2",
          type: "Number",
          describe: "1:中国地图彩色版 \n2:中国地图暖色版\n3:中国地中国地图蓝黑版\n4:中国地图灰色版",
        },
      ],
    };
  },
  },
};
</script>
<style >
.cell{
  white-space: pre-wrap !important;
}
</style>

在网上查了很多种方法,但都没有效果。

图中加入\n是起换行的作用,但是光写这个是不够的。

还需要在样式里加上

style="white-space: pre-wrap;"

一般写到这里,已经可以实现效果了。

因为我用的Element UI框架,所以是打开F12查看表格内文字的父级元素,给这个父级元素加上

white-space: pre-wrap

提示:

如果你的CSS里有<style scoped>,那么还是不生效的,需要删掉标签中的scoped。

还有一种比较简单的方法v-html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
       	   <span v-html='msg'></span>
        </div>
    </body>
    <script src="../vue.js"></script>
    <script>
       var vm = new Vue({
            el: '#app',
            data: {
              msg:'这是一个消息<br>这是另外一个消息',
            }
        })
    </script>
</html>

vue字符串中<br/>换行问题

用<pre></pre>标签把字符串包起来

同时<br/>换\n

总结

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

相关文章

  • vue中配置后端接口服务信息详解

    vue中配置后端接口服务信息详解

    这篇文章主要介绍了vue中配置后端接口服务信息详解,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • vue cookie和本地存储的使用详解

    vue cookie和本地存储的使用详解

    在Vue中,可以使用多种方式来处理cookie和本地存储,不同的方法还有不同的特点和适用场景,本文主要介绍了这些方法的对比和使用场景,希望对大家有所帮助
    2023-08-08
  • 详解vue事件对象、冒泡、阻止默认行为

    详解vue事件对象、冒泡、阻止默认行为

    本篇文章主要介绍了详解vue事件对象、冒泡、阻止默认行为,这里整理了详细的代码,有需要的小伙伴可以参考下。
    2017-03-03
  • vue实现文件上传读取及下载功能

    vue实现文件上传读取及下载功能

    这篇文章主要为大家详细介绍了vue实现文件上传读取及下载功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • vue+axios+java实现文件上传功能

    vue+axios+java实现文件上传功能

    这篇文章主要为大家详细介绍了vue+axios+java实现文件上传功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-06-06
  • Vue实现购物车基本功能

    Vue实现购物车基本功能

    这篇文章主要为大家详细介绍了Vue实现购物车的基本功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • 解决使用vue-awesome-swiper组件手动滚动点击失效问题

    解决使用vue-awesome-swiper组件手动滚动点击失效问题

    这篇文章主要介绍了使用vue-awesome-swiper组件手动滚动点击失效问题解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • Vue中瀑布流布局与图片加载优化的实现

    Vue中瀑布流布局与图片加载优化的实现

    本文主要介绍了Vue中瀑布流布局与图片加载优化的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-06-06
  • vue3+ts实现树形组件(菜单组件)

    vue3+ts实现树形组件(菜单组件)

    本文主要介绍了vue3+ts实现树形组件(菜单组件),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)

    vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)

    这篇文章主要介绍了vue 弹窗时 监听手机返回键关闭弹窗功能,本文给大家介绍的非常详细,具有一定的参考借鉴价值(页面不跳转) ,需要的朋友可以参考下
    2019-05-05

最新评论