Vue中如何實現(xiàn)字符串換行
更新時間：2023年10月19日 10:39:30 作者：呈兩面包夾芝士
這篇文章主要介紹了Vue中如何實現(xiàn)字符串換行問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
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：中國地圖彩色版 \n2：中國地圖暖色版\n3：中國地中國地圖藍黑版\n4：中國地圖灰色版",
},
],
};
},
},
};
</script>
<style >
.cell{
white-space: pre-wrap !important;
}
</style>
在網(wǎng)上查了很多種方法，但都沒有效果。
圖中加入\n是起換行的作用，但是光寫這個是不夠的。
還需要在樣式里加上
style="white-space: pre-wrap;"
一般寫到這里，已經(jīng)可以實現(xiàn)效果了。
因為我用的Element UI框架，所以是打開F12查看表格內(nèi)文字的父級元素，給這個父級元素加上
white-space: pre-wrap
提示：
如果你的CSS里有<style scoped>，那么還是不生效的，需要刪掉標(biāo)簽中的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>標(biāo)簽把字符串包起來
同時<br/>換\n
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue配置font-awesome5的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要介紹了Vue Router路由動態(tài)緩存組件使用,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
在Vue.js 3的Composition API中,watchEffect是一個非常實用的響應(yīng)式API,當(dāng)我們在watchEffect中使用異步代碼時,往往會遇到一些意想不到的問題,本文將深入探討watchEffect中的異步問題,分析其原理,并提供切實可行的解決方案,需要的朋友可以參考下2025-06-06
本文主要介紹了Vue操作數(shù)組的幾種常用方法小結(jié),主要包括map、filter、forEach、find 和 findIndex 、some 和 every、includes、Array.from這幾種方法,感興趣的可以了解一下2023-09-09
今天小編就為大家分享一篇vue刪除html內(nèi)容的標(biāo)簽樣式實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Vue實現(xiàn)移動端頁面切換效果,本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2018-11-11
這篇文章主要介紹了如何使用Vue和ElementPlus構(gòu)建前端頁面,特別是如何進行跨域請求和使用Vue?Router進行路由管理,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-01-01
vue?頁面刷新、重置、更新頁面所有數(shù)據(jù)的示例代碼
Vue.js提供了多種方式來實現(xiàn)頁面刷新、重置和更新頁面所有數(shù)據(jù)的功能,下面通過示例代碼演示vue?頁面刷新、重置、更新頁面所有數(shù)據(jù),感興趣的朋友跟隨小編一起看看吧2024-01-01
詳解vue-cli項目中的proxyTable跨域問題小結(jié)
這篇文章主要介紹了詳解vue-cli項目中的proxyTable跨域問題小結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
Vue.js樣式動態(tài)綁定實現(xiàn)小結(jié)
這篇文章主要介紹了Vue.js樣式動態(tài)綁定實現(xiàn)小結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01