Vue中如何實(shí)現(xiàn)字符串換行

更新時(shí)間：2023年10月19日 10:39:30 作者：呈兩面包夾芝士

這篇文章主要介紹了Vue中如何實(shí)現(xiàn)字符串換行問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue字符串換行

先上效果圖：

數(shù)據(jù)格式：字符串

代碼如下：

<template>
      <div style="margin-top:20px">
        <el-table :data="tableData" style="width: 100%" border >
          <el-table-column
            prop="parameter"
            label="參數(shù)"
          ></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：中國(guó)地圖彩色版 \n2：中國(guó)地圖暖色版\n3：中國(guó)地中國(guó)地圖藍(lán)黑版\n4：中國(guó)地圖灰色版",
        },
      ],
    };
  },
  },
};
</script>

<style >
.cell{
  white-space: pre-wrap !important;
}
</style>

在網(wǎng)上查了很多種方法，但都沒(méi)有效果。

圖中加入\n是起換行的作用，但是光寫(xiě)這個(gè)是不夠的。

還需要在樣式里加上

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

一般寫(xiě)到這里，已經(jīng)可以實(shí)現(xiàn)效果了。

因?yàn)槲矣玫腅lement UI框架，所以是打開(kāi)F12查看表格內(nèi)文字的父級(jí)元素，給這個(gè)父級(jí)元素加上

white-space: pre-wrap

提示：

如果你的CSS里有<style scoped>，那么還是不生效的，需要?jiǎng)h掉標(biāo)簽中的scoped。

還有一種比較簡(jiǎn)單的方法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:'這是一個(gè)消息<br>這是另外一個(gè)消息',
            }
        })
    </script>
</html>