VueJS h()函数中如何实现元素与文本的换行及间距设置

一、div元素间距不生效的修复 #

你之前的style设置没生效，核心原因是CSS属性值缺省了单位。Vue的内联样式绑定中，像margin、padding这类需要长度单位的属性，直接写数字会被浏览器忽略，必须明确指定单位（比如px、em）：

// 正确写法：带单位的数值
h('div', {
  style: {
    margin: '20px', // 控制元素外间距
    padding: '15px' // 控制元素内边距，拉开内部文本与边框的距离
  }
}, '带间距的文本内容')

如果是容器内多个子div之间的间距，推荐用gap属性更高效，不用给每个子元素单独加margin：

// 容器div，统一控制子元素间距
h('div', {
  style: {
    display: 'flex',
    flexDirection: 'column', // 垂直排列子元素
    gap: '15px' // 子元素之间的固定间距
  }
}, [
  h('div', '子元素1'),
  h('div', '子元素2'),
  h('div', '子元素3')
])

二、内部文本换行的实现 #

方法1：用<br>元素节点 #

不要直接写<br>字符串（会被当作文本显示），而是用h()函数创建br元素作为子节点：

h('div', null, [
  '第一行文本',
  h('br'), // 创建换行节点
  '第二行文本',
  h('br'),
  '第三行文本'
])

方法2：利用换行符+CSS样式 #

如果文本本身包含\n，给div添加white-space: pre-line样式，让浏览器解析换行符：

h('div', {
  style: {
    whiteSpace: 'pre-line'
  }
}, '第一行文本\n第二行文本\n第三行文本')

内容的提问来源于stack exchange，提问作者rrr