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="類(lèi)型"
></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: "類(lèi)名",
},
{
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>
vue字符串中<br/>換行問(wèn)題
用<pre></pre>標(biāo)簽把字符串包起來(lái)
同時(shí)<br/>換\n
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue配置font-awesome5的方法步驟，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
Vue Router路由動(dòng)態(tài)緩存組件使用詳解
這篇文章主要介紹了Vue Router路由動(dòng)態(tài)緩存組件使用,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
Vue.js中watchEffect的異步問(wèn)題及解決方案
在Vue.js 3的Composition API中,watchEffect是一個(gè)非常實(shí)用的響應(yīng)式API,當(dāng)我們?cè)趙atchEffect中使用異步代碼時(shí),往往會(huì)遇到一些意想不到的問(wèn)題,本文將深入探討watchEffect中的異步問(wèn)題,分析其原理,并提供切實(shí)可行的解決方案,需要的朋友可以參考下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)簽樣式實(shí)例
今天小編就為大家分享一篇vue刪除html內(nèi)容的標(biāo)簽樣式實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Vue實(shí)現(xiàn)移動(dòng)端頁(yè)面切換效果【推薦】
這篇文章主要介紹了Vue實(shí)現(xiàn)移動(dòng)端頁(yè)面切換效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-11-11
這篇文章主要介紹了如何使用Vue和ElementPlus構(gòu)建前端頁(yè)面,特別是如何進(jìn)行跨域請(qǐng)求和使用Vue?Router進(jìn)行路由管理,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-01-01
vue?頁(yè)面刷新、重置、更新頁(yè)面所有數(shù)據(jù)的示例代碼
Vue.js提供了多種方式來(lái)實(shí)現(xiàn)頁(yè)面刷新、重置和更新頁(yè)面所有數(shù)據(jù)的功能,下面通過(guò)示例代碼演示vue?頁(yè)面刷新、重置、更新頁(yè)面所有數(shù)據(jù),感興趣的朋友跟隨小編一起看看吧2024-01-01
詳解vue-cli項(xiàng)目中的proxyTable跨域問(wèn)題小結(jié)
這篇文章主要介紹了詳解vue-cli項(xiàng)目中的proxyTable跨域問(wèn)題小結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
Vue.js樣式動(dòng)態(tài)綁定實(shí)現(xiàn)小結(jié)
這篇文章主要介紹了Vue.js樣式動(dòng)態(tài)綁定實(shí)現(xiàn)小結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01