脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue实现字符串换行

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项目打包后上传至GitHub并实现github-pages的预览

    vue项目打包后上传至GitHub并实现github-pages的预览

    这篇文章主要介绍了vue项目打包后上传至GitHub并实现github-pages的预览，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • vue3如何解决slot深层透传问题

    vue3如何解决slot深层透传问题

    这篇文章主要介绍了vue3如何解决slot深层透传问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-04-04
  • vue 将页面公用的头部组件化的方法

    vue 将页面公用的头部组件化的方法

    本篇文章主要介绍了vue 将页面公用的头部组件化的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • vue实现分割验证码效果

    vue实现分割验证码效果

    这篇文章主要为大家详细介绍了vue实现分割验证码效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-03-03
  • vue 实现tab切换保持数据状态

    vue 实现tab切换保持数据状态

    这篇文章主要介绍了vue 实现tab切换保持数据状态，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • Vue.extend构造器的详解

    Vue.extend构造器的详解

    这篇文章主要介绍了Vue.extend构造器的详解的相关资料,需要的朋友可以参考下
    2017-07-07
  • Vue制作Todo List网页

    Vue制作Todo List网页

    这篇文章主要为大家详细介绍了Vue制作Todo List网页的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-04-04
  • vue项目中安装less依赖的过程

    vue项目中安装less依赖的过程

    这篇文章主要介绍了vue项目中安装less依赖的过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08
  • Vue双向数据绑定(MVVM)的原理

    Vue双向数据绑定(MVVM)的原理

    这篇文章主要介绍了Vue双向数据绑定的原理，帮助大家更好的理解和学习vue，感兴趣的朋友可以了解下
    2020-10-10
  • element实现合并单元格通用方法

    element实现合并单元格通用方法

    这篇文章主要介绍了element实现合并单元格通用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11

最新评论