vue的大括号Mustache语法中实现换行

于 2022-06-08 11:54:42 发布
阅读量624 收藏 3
点赞数 2
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40053972/article/details/125181865
版权

vue的插值语法 {{ example }}，example中有 \n 字符，使用插值表达式进行渲染时发现，渲染的内容不会换行只是用空格将内容分开

解决办法：将div容器的white-space属性设置为pre-wrap即可解决问题。

<div style="white-space:pre-wrap">{{ content }}</div>

content中的换行(\n)可以正常显示。

Nazimei_
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决Vue大括号字符换行踩的坑
01-18
最近遇到这样一个问题，在页面上要显示一段自定义的文本，文本如果较长的话需要换行显示。 在HTML中可以通过<br>标签换行，也可以通过\n转义字符换行 在Vue中用大括号显示的变量，加<br>会直接被当成字符串显示出来，加\n显示一个空格，加\r\n显示两个空格，因为{{}}}是文本插值，内部都会按照普通字符串进行处理，可以用v-html进行显示 如下显示name变量 data() { return{ name: '前一部分<br>后一部分' } } 在元素上显示name值 <p v-html=”name”></p> 补充知识：使用v-html解决Vue.js渲染过程
Vue大括号字符换行踩的坑
热门推荐
FE小白的进化之路
07-14 1万+
最近遇到这样一个问题，在页面上要显示一段自定义的文本，文本如果较长的话需要换行显示。 在HTML中可以通过标签换行，也可以通过\n转义字符换行 在Vue中用大括号显示的变量，加会直接被当成字符串显示出来，加\n显示一个空格，加\r\n显示两个空格，因为{{}}}是文本插值，内部都会按照普通字符串进行处理，可以用v-html进行显示 如下显示name变量 data() { retu
html遇到括号换行了,解决Vue大括号字符换行踩的坑
weixin_39713763的博客
06-09 937
最近遇到这样一个问题，在页面上要显示一段自定义的文本，文本如果较长的话需要换行显示。在HTML中可以通过标签换行，也可以通过转义字符换行在Vue中用大括号显示的变量，加会直接被当成字符串显示出来，加显示一个空格，加显示两个空格，因为{{}}}是文本插值，内部都会按照普通字符串进行处理，可以用v-html进行显示如下显示name变量data() {return{name: "前一部分后一部分"}}在...
Vue笔记
wangtao的博客
03-25 212
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>vue</title> <script type="text/javascript" src="js/vue.js" ></script> </head&g...
vue插值表达式如何将\n转义为换行
qq_42132814的博客
09-22 2546
在项目中遇到一个渲染问题，渲染的内容中有个\n字符，\n表示转义，使用插值表达式进行渲染时发现，渲染的内容不会换行只是用空格将内容分开 解决方案： 使用white-space属性 <div class="text-wrapper" > {{ text }} </div> <style scope> .text-wrapper { white-space: pre-wrap; } </style> p
模板引擎Mustache核心功能实现思路记录
qq_44813296的博客
05-29 316
1、什么是模板引擎？ 将数据变成视图最优雅的解决方法。 v-for：实际上也是一直模板引擎 历史方法： 1）纯DOM法：通过createElement标签，在追加节点（上树）。 2）数组join法：var str=['A','B','C','D'].join('') 输出结果：ABCD （可以实现换行） 3）ES6的模板语法：反引号、变量 4）模板引擎:mustache:{{}} 2、模板引擎的基本语法 1）基本对象：{{}} 2）循环数组：开始循环：{{#数组名}} 简单数组{{.}
简单了解vue 插值表达式Mustache
12-28
一、本节说明 ...--mustache语法中,不仅仅可以直接写变量,也可以写简单的表达式--> <h2>{{firstName.length}}（使用‘.'获取属性） <h2>{{firstName + lastName}}（字符串拼接） <h2>{{firstName +
Vue.js的模板语法详解
10-15
在Vue.js中，最常见的数据绑定方式是使用Mustache语法（双大括号）。例如，可以在HTML模板中使用 {{msg}} 来将数据对象上msg属性的值动态显示在页面上。当数据对象的msg属性发生变化时，绑定的数据也会自动更新。...
Vue.js中数据绑定的语法教程
01-19
数据绑定最基础的形式是文本插值，使用 “Mustache” 语法（双大括号）： <span>Message: {{ msg }} Mustache 标签会被相应数据对象的 msg 属性的值替换。每当这个属性变化时它也会更新。 你也可以只处理单次插值，...
vue模板语法-插值详解
08-31
在 Vue 模板语法中，文本插值是使用 Mustache 语法（双打括号）来实现的。例如：<span>message:{{msg}}。在上面的例子中，msg 是一个数据绑定的变量，当 msg 变化时，模板中的文本也会相应地变化。 v-once 指令 v-...
微信小程序之mustache语法
兴华的博客
12-28 1382
微信小程序的mustache语法详解
mustache语法整理
weixin_30663471的博客
08-04 421
基本使用方法： { "name": "Chris", "company": "<b>GitHub</b>" } template output 1、 {{name}} 2、 {{age}} //数据中没有age,输出为空 3、 {{company}} //会转义 4、 {{{company}}} //不会转义 ...
Mustache转义html标签
justinytsoft的博客
12-26 1949
# 数据 {content:'这是一个链接'} 第一种方式不会解析html标签，会直接将标签原样展示在页面 # 模板 {{content}} # 结果 这是一个链接 第二种方式会解析html标签 {{{content}}} # 结果 这是一个链接
Mustache 使用心得总结
weixin_34087301的博客
10-04 111
Mustache 使用心得总结 前言： 之前的一个项目里面就实用到这个前台的渲染模版，当时挺忙的也没时间抽出时间总结一下，刚好上周项目里又用到这个轻量型的渲染模版，真心感觉非常好用，因此就总结一下使用心得，算是一个入门级别的指引吧。 1.  Mustache 概述 Mustache是基于JavaScript实现的模版引擎，类似于JQuery Template，可是这个模版更...
Mustache的简单使用
庸医2048的博客
03-19 945
2016/03/19 昨天第一次实用了Mustache这框架的第一次使用。
模板语法 mustache语法 （双大括号语法）
qq_35801979的博客
05-23 1241
模板语法 mustache语法 双大括号语法 指令 Vue 指令 组件 作用： 是用来操作DOM的，指令就是绑定在DOM身上的一个属性，这个属性具备一定的功能，这个功能用来操作DOM 以后我们不在像以前一样，先获取DOM，在操作了，我们现在可以直接使用指令来操作DOM 这个指令需要模板语法的支持，所以我们采用jsx语法糖 模板语法 模板语法支持性还是很高的，数据类型都是支持的，但是不支持...
Mustache笔记
05-06 140
Mustache是一种Logic-less template.不支持if这类条件判断是Logic-less的显著特征之一. 经典案例： var view = { 　　name: "Joe", 　　winnings: { 　　　　value: 1000, 　　　　taxed_value: function() { return this.value - (this....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值