脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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配置font-awesome5的方法步骤

    vue配置font-awesome5的方法步骤

    这篇文章主要介绍了vue配置font-awesome5的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • Vue Router路由动态缓存组件使用详解

    Vue Router路由动态缓存组件使用详解

    这篇文章主要介绍了Vue Router路由动态缓存组件使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-04-04
  • Vue.js中watchEffect的异步问题及解决方案

    Vue.js中watchEffect的异步问题及解决方案

    在Vue.js 3的Composition API中,watchEffect是一个非常实用的响应式API,当我们在watchEffect中使用异步代码时,往往会遇到一些意想不到的问题,本文将深入探讨watchEffect中的异步问题,分析其原理,并提供切实可行的解决方案,需要的朋友可以参考下
    2025-06-06
  • Vue操作数组的几种常用方法小结

    Vue操作数组的几种常用方法小结

    本文主要介绍了Vue操作数组的几种常用方法小结,主要包括map、filter、forEach、find 和 findIndex 、some 和 every、includes、Array.from这几种方法,感兴趣的可以了解一下
    2023-09-09
  • vue删除html内容的标签样式实例

    vue删除html内容的标签样式实例

    今天小编就为大家分享一篇vue删除html内容的标签样式实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue实现移动端页面切换效果【推荐】

    Vue实现移动端页面切换效果【推荐】

    这篇文章主要介绍了Vue实现移动端页面切换效果,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2018-11-11
  • vue搭建简易前端的思路及问题详解

    vue搭建简易前端的思路及问题详解

    这篇文章主要介绍了如何使用Vue和ElementPlus构建前端页面,特别是如何进行跨域请求和使用Vue Router进行路由管理,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-01-01
  • vue 页面刷新、重置、更新页面所有数据的示例代码

    vue 页面刷新、重置、更新页面所有数据的示例代码

    Vue.js提供了多种方式来实现页面刷新、重置和更新页面所有数据的功能,下面通过示例代码演示vue 页面刷新、重置、更新页面所有数据,感兴趣的朋友跟随小编一起看看吧
    2024-01-01
  • 详解vue-cli项目中的proxyTable跨域问题小结

    详解vue-cli项目中的proxyTable跨域问题小结

    这篇文章主要介绍了详解vue-cli项目中的proxyTable跨域问题小结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • Vue.js样式动态绑定实现小结

    Vue.js样式动态绑定实现小结

    这篇文章主要介绍了Vue.js样式动态绑定实现小结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01

最新评论