解决Vue大括号字符换行踩的坑

最近遇到这样一个问题，在页面上要显示一段自定义的文本，文本如果较长的话需要换行显示。

在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渲染过程中html标签不能被解析（html标签显示为字符串）

在网页中，后台传来的json数据中包含html标签，将该json数据绑定到Vue.js中对象中，对该对象进行for循环，发现数据中的html标签不能被解析，而是当作字符显示出来。

问题如下所示：

解决：

Vue.js中提供了v-html这个指令来解决这个问题，或者对数据对象使用{{{vm.data}}}三个大括号来包裹对象，就可以正常解析了。

代码改动如下：

此外某些情况下，使用{{{}}}符号仍然不能解析html标签，但v-htm指令却可以，可能是Vue.js存在的bug吧。

解释见下图

以上这篇解决Vue大括号字符换行踩的坑就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 浅谈vue在html中出现{{}}的原因及解决方式

    原因: 浏览器渲染机制,解析html结构 -> 加载外部脚本和样式表文件 -> 解析并执行脚本代码 -> 构造html dom模型 -> 加载图片等外部文件 -> 页面加载完毕. 初始化vue的js写在页面底部,也就是最后才执行js脚本. 所以页面从头到尾开始渲染时,渲染到标签时,由于vue还未初始化,所以就会显示类似这样的代码 <h2>{{courseName}}</h2> 当网速很慢的时候就看得比较清楚,可能会让用户误以为bug之类的,快一点的话就

  • vue data有值,但是页面{{}} 取不到值的解决

    我的问题出在js引入的顺序不对,导致不能正常显示vue中的值 正确的顺序应该是: 先引入vue的js--------html代码-----最后引入自己写的js 补充知识:vue中子组件的created.mounted生命周期钩子中获取不到props中的值问题 父子组件通信 这个很简单,父组件中使用v-bind绑定传送,子组件使用props接收即可 . 例如:在父组件中 <template> <div> <div :Data="Data"></d

  • 解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题

    在项目中遇到后台数据还没有加载完毕,但是页面上调用了后台数据中的字段,这样就会报undefined. 例如:一进入页面直接回显数据. 我在created里面请求接口进行赋值 this.matterAll=[]; 会报accessItemName为undefined: 原因以及解决办法: 在上面data()中,我定义了matterAll:[],也就是空的数组, template中,我又直接用了this.matterAll[0],这个时候this.matterAll[0]=undefined,所以t

  • vue 防止页面加载时看到花括号的解决操作

    如下所示: <style> [v-cloak]{ display:none } </style> v-cloak v-text v-html v-cloak用于大段 v-text用于单个标签 v-html用于带有标签的处理 补充知识:vue花括号数据绑定不成功的问题 我就废话不多说了,大家还是直接看案例吧~ <!DOCTYPE html> <html> <head> <meta charset="utf-8" />

  • 解决Vue大括号字符换行踩的坑

    解决Vue大括号字符换行踩的坑

    最近遇到这样一个问题,在页面上要显示一段自定义的文本,文本如果较长的话需要换行显示. 在HTML中可以通过<br/>标签换行,也可以通过\n转义字符换行 在Vue中用大括号显示的变量,加<br/>会直接被当成字符串显示出来,加\n显示一个空格,加\r\n显示两个空格,因为{{}}}是文本插值,内部都会按照普通字符串进行处理,可以用v-html进行显示 如下显示name变量 data() { return{ name: '前一部分<br/>后一部分' } } 在元素上显示

  • 解决Vue watch里调用方法的坑

    这里是说watch调用methods里方法的时候,页面经常会报找不到方法 这个时候一定要在watch里去输出一下this, 看看this包裹的壳是不是多了好多层,所以找不到方法,虽然我到现在还没理解为啥有时候会出现一层或几层壳的问题. 例如 正常情况下用this.functionname()就可以调用了. 但是在一些情况下(现在本人还没找到原因)在控制台输出this的时候你会发现数据经常是这样包裹的a{name},name里面对你的methods还包裹了一层,所以使用方法的时候就会变成 this

  • Python RawString与open文件的newline换行符遇坑解决

    Python RawString与open文件的newline换行符遇坑解决

    目录 背景 思路 遇到的问题 思考过程 Raw String 如果字符串没转义字符,那么 Raw String 跟普通 String 完全一致 误区:注意单个字符的引号问题 启发 正则替换的问题 open 文件的 newline 参数 背景 一次工作中,我需要完成某个文件的字符串替换. 需求是这样的:文件A有个占位符,需要利用Python3,把占位符替换成文件B的内容.文件都不大,可以一次性读到内存处理. 我想,这不是简单的open read replace write就搞定了嘛? 结果,还真有

  • 浅谈vue引入css,less遇到的坑和解决方法

    在使用vux开发手机页面时,引入vux的公共样式less一直报错,通过各种百度,Google都没有解决,走了很多弯路.最后才发现钻牛角尖了,可以换一种方法引入. 1.报错的使用:在App中 @ ./~/css-loader?{"minimize":false,"sourceMap":false}!./~/vux/src/styles/reset. less 3:10-115 @ ./~/css-loader?{"minimize":false,&

  • 解决vue 给window添加和移除resize事件遇到的坑

    在vue项目中需要监听window窗口变化来时时计算图片的高度,于是就加了一个监听事件:确实监听到了,但是在离开当前页面进入其他页面改变窗口大小时发现window还是处于监听状态,即移除监听事件并没有生效. //之前的写法,这样写移除监听事件无效 mounted(){ window.addEventListener('resize',()=>{ '改变窗口大小时需要做的处理' }); }, beforeDestroy() { window.removeEventListener("resi

  • 解决vue字符串换行问题(绝对管用)

    vue 中 用 {{}} 进行数据绑定的时候,如果我么你想让字符串换行是不生效的 解决办法,不用上边的方式进行数据绑定,用v-html标签代替{{}} data中的str为 "<b>1111</b><br/>2222" 例1, <div>{{str}}<div> 例1效果 <i>1111</i><br/>2222 例2, <div v-html="str">&

  • 解决springCache配置中踩的坑

    目录 springCache配置中踩的坑 先附上正确的配置 springCache配置及一些问题的解决 配置 @Cacheable参数 @CacheEvict 参数 @CachePut 参数 springCache配置中踩的坑 项目基于SpringBoot,使用了SpringCache. 早先在网上找了一份SpringCache的配置,后来由于需要使用到自定义序列化方法,注入一个自定义的序列化类.但是在后来发现自定义的序列化类始终没有调用,后来查看源码后终于发现了原因 先附上正确的配置 @Bea

  • Golang时间处理中容易踩的坑分析解决

    目录 简介 类型 时区 小心有坑 时间解析的使用场景 时间操作 获取当前时间 时区设置 时间格式化(时间类型转字符串) 时间类型转时间戳 时间戳转时间类型 时间字符串转时间类型 时间计算 获取时间类型具体内容 时间加减 时间间隔(耗时) 时间取整(向上取整向下取整) 拓展 json时间转换 简介 在各个语言之中都有时间类型的处理,因为这个地球是圆的(我仿佛在讲废话),有多个时区,每个时区的时间不一样,在程序中有必要存在一种方式,或者说一种类型存储时间,还可以通过一系列的方法转换成不同国家的时间.

  • springboot2.x引入feign踩的坑及解决

    springboot2.x引入feign踩的坑及解决

    目录 springboot2.x引入feign踩的坑 一.需求 二.什么是feign 三.springboot1.x中feign的使用 四.springboot2.x中feign的使用 feign调用方式比较 一.事发原因 二.方式1介绍 三.方式2介绍 四.调用结果测试 五.两种方式对比 六.小结一下 springboot2.x引入feign踩的坑 一.需求 最近公司项目需求,需要调用第三方服务的接口,所以选用了feign来实现(这里只说springboot2.x的pom引用,没有怎么使用,网

  • 解决vue select当前value没有更新到vue对象属性的问题

    vue是一款轻量级的mvvm框架,追随了面向对象思想,使得实际操作变得方便,但是如果使用不当,将会面临着到处踩坑的危险,写这篇文章的目的是我遇到的这个问题在网上查了半天也没有发现解决方案,最终研究了vue的源码中有关select元素的部分找到了答案,下面简单介绍我踩的关于select的一个坑: 使用场景:有两个select元素,一个select元素变动时,动态修改另一个select中填充的内容,并默认选择第一项,问题来了,每次当我提交form数据时发现:从slave元素对应的数据没有更新到响应v

随机推荐