1.在vue标签内不识别'\n'换行

Posted 2023-04-28

参考技术A 正常情况下你希望是这样的：

1.文字文字文字文字文字文字文字文字文字；

2.文字文字文字文字文字文字文字文字文字；

3.文字文字文字文字文字文字文字文字文字；

实际上是这样的：

1.文字文字文字文字文字文字文字文字文字；2.文字文字文字文字文字文字文字文字文字；3.文字文字文字文字文字文字文字文字文字；

加了换行\n但是不起作用

解决办法：

1.给相关的div加上样式：white-space：pre-line.一行样式就解决，

white-space 属性设置如何处理元素内的空白。

2.添加pre标签 <pre><p v-html="content"></p></pre>

3.正则匹配，

React 组件在表单标签内不起作用

【中文标题】React 组件在表单标签内不起作用

【英文标题】：React Component does not work inside form tag

【发布时间】：2017-10-21 09:42:52

【问题描述】：

我正在尝试在 React 中创建一个交互式表单。

我在使用表单标签中的组件时遇到了严重的问题。 组件和按钮都执行此表单标记之外但不在其内部的所有功能。我错过了什么？ 提前致谢

  <button type="button" onClick=this.addAbholer >Click me</button>
  <Mycomp />
      <form id="form"  className="wizard-big">
          <Mycomp />
          <button type="button" onClick=this.addAbholer >Click me</button>

【问题讨论】：

不工作是什么意思，能多解释一下吗？

该按钮未触发任何警报或控制台日志。组件渲染正确，但组件的任何功能都不起作用

你检查你的控制台了吗？这就是你的全部代码吗？

是的，它什么也没发生。没有错误没有任何东西。该按钮是可点击的，但没有执行任何功能

【参考方案1】：

检查此示例工作代码，我使用了与您粘贴相同的代码，在表单内呈现按钮和组件，子组件的所有事件都被触发并且单击按钮也可以正常工作。

class App extends React.Component
   addAbholer = (e) => 
      console.log('inside App');
   
   render()
      return <form className="wizard-big">
          <Mycomp />
          <button type='button' onClick=this.addAbholer>Click me</button>
      </form>
   

          
class Mycomp extends React.Component
   click = () => 
      console.log('inside Mycomp');
   
   render()
      return <div onClick=this.click>Click on Mycomp</div>
   
          

ReactDOM.render(<App/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>

【讨论】：

很好的例子！你给了我提示，我的导入 jquery 步骤正在避免函数标签中的任何按钮操作...

不，不是。似乎 jquery 步骤不允许在其向导中使用函数..