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实现商品飞入购物车效果(电商项目)，这种效果在一些电商平台经常会用到，今天小编通过代码详解,需要的朋友可以参考下2019-11-11
这篇文章主要介绍了Element-ui upload上传文件限制的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
这篇文章主要介绍了详解element-ui日期时间选择器的日期格式化问题，本文用到了DateTimePicker来选择日期时间，但是在将数据传回后台的过程中遇到了一些令人头疼的问题，有兴趣的一起来了解一下2019-04-04
在 Vue 应用中,组件间通信是构建复杂应用时的一个常见需求,Vue3.x 提供了provide和inject API,让跨组件通信变得更加简洁和高效,本文将深入探讨如何使用provide和inject在Vue3.x中实现跨组件通信,并通过示例代码一步步进行说明,需要的朋友可以参考下2024-03-03
这篇文章主要介绍了vue 组件通信的几种方式,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-03-03
这篇文章主要为大家详细介绍了vue使用axios跨域请求数据的问题，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
这篇文章主要介绍了vuex的几个属性及其使用传参,本文结合实例代码给大家讲解的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-01-01
这篇文章主要介绍了Vue实现圆环进度条的示例，帮助大家更好的理解和使用前端框架进行开发，感兴趣的朋友可以了解下2021-02-02
我们在开发中经常会遇到通过点击某个按钮或者文字实现图片的预览功能,这里我们分别介绍vue2和vue3里面如何实现图片预览方法,需要的朋友可以参考下2023-09-09
解决ant design vue 表格a-table二次封装,slots渲染的问题
这篇文章主要介绍了解决ant design vue 表格a-table二次封装,slots渲染的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
最新评论