- 上一篇：microsoft.xmlhttp组件的用法和属性
- 下一篇：关于网络问卷的相关调查问卷表
<button @click="submitText">提交</button>
<p>显示的内容：</p>
<p>{{text2}}</p>
</p>
不处理空格和换行 显示在 pre 标签里面
将 p 替换成 pre 标签，将提交的文本显示在 pre 标签里面。pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符，他比较常见的应用就是用来显示代码，在技术网站和博客的页面里面，pre 标签都是用来包裹代码块的。
可以从下图的效果看出，pre 标签也可以完全实现保留用户所输入的空格和换行，看上去似乎能够达到我的基本需求了。那么接下来的问题就是，如何去掉空格，并且实现自动缩进2个字符。
textarea换行符如何实现换行
<p id="app">
<p>请输入内容：</p>
<textarea name="t1" rows="8" cols="80" v-model="text1" ></textarea>
<button @click="submitText">提交</button>
<p>显示的内容：</p>
<pre>{{text2}}</pre>
</p>
那么我试试直接给 pre 标签设置 css 属性text-index:2em;？这样能够实现需求吗？答案显然是不行，因为这个属性规定的是块级元素首行文本的缩进，而这里从始至终都只有一个块级元素 pre ，显然是不能实现。而且我们还要考虑到用户自己输入的空格。
替换空格保留换行
既然直接显示行不通，看来还是必须要处理文本，那我们就处理一下。首先尝试，去掉所有的空格，首先想到的就是trim()方法。思路就是，以换行符为分割，获取到每一段文本，然后用trim()方法去掉文本前后的空格，用标签把每段文字包裹起来，再把每一段用<br>换行标签拼接起来。同时，不用pre标签来显示文本了，直接将处理过后的的 html 片段插入到 p 标签里面，这里用到的是 vue 的 v-html 属性。textarea换行符如何实现换行
<p id="app">
<p>请输入内容：</p>
<textarea name="t1" rows="8" cols="80" v-model="text1" ></textarea>
<button @click="submitText">提交</button>
<p>显示的内容：</p>
<p v-html="text2" style="text-indent:2em;"></p>
</p>
// js部分
submitText(){
let arr = [];
this。text1。split('\n')。forEach(item=>arr。push(`<p>${item。trim()}</p>`));
this。text2 = arr。join('<br>');