vue三元表达式的选项中有换行标签＜br＞，整个表达式变为字符串

最新推荐文章于 2024-07-12 10:14:29 发布
最新推荐文章于 2024-07-12 10:14:29 发布
阅读量941 收藏
点赞数 1
文章标签： 前端 vue.js uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_60020621/article/details/127109065
版权
在Vue模板中，三元表达式内包含的HTML换行标签<br>不会被解析，导致表达式失效。为解决此问题，可以采用两种方式：一是在样式中添加`whiteSpace: pre-line`，并用` `代替换行；二是使用`
`标签，同样用`
`表示换行。这两种方法都可以确保换行在页面上正确显示。
摘要由CSDN通过智能技术生成

在Vue中，使用三元表达式，并且表达式的选项中有换行标签<br>，则表达式不会生效。整个表达式变为字符串。

<view style="font-size: 24rpx; color: #666;transform: scale(0.85);font-weight: 300;">
	{{ vipType==2 ? "尊享SVIP专属标识<br>和独特相框" : "尊享VIP专属标识和独特相框" }}
</view>

解决：

//第一种，样式中加whiteSpace: pre-line，换行用\n
<view style="font-size: 24rpx; color: #666;transform: scale(0.85);font-weight: 300;whiteSpace: pre-line">
	{{ vipType==2 ? "尊享SVIP专属标识\n和独特相框" : "尊享VIP专属标识\n和独特相框" }}
</view>

//第二种，用pre标签，换行用\n
<pre>{{ vipType==2 ? "尊享SVIP专属标识\n和独特相框" : "尊享VIP专属标识\n和独特相框" }}</pre>

楚城相拥
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue不识别<br>标签
楊帥
03-06 4299
问题描述： 如图，标签内直接输入标签生效，当使用变量的时候，变量中的不识别。 &amp;lt;!--详情--&amp;gt; &amp;lt;div&amp;gt; &amp;lt;p&amp;gt;开发者的话&amp;lt;/p&amp;gt;› &amp;lt;p&amp;gt;{{details.intro}}&amp;lt;/p&amp;gt; &amp;lt;/div
JS去除字符串最后的逗号实例分析【四种方法】
10-16
在JavaScript编程中，有时我们需要处理字符串，特别是在处理数组或对象转换为字符串时，经常会遇到要去除字符串末尾的逗号的问题。本实例分析了四种不同的方法来实现这一目标，适用于那些需要对字符串进行操作和清理...
vue 中 换行
weixin_42609225的博客
01-06 9948
在 Vue 中要换行，可以使用 <br> 标签。 例如： <template> <div> 这是第一行<br> 这是第二行 </div> </template> 也可以使用 \n 换行。例如： <template> <div> {{ '这是第一行\n这是第二行' }...
[Vue3 + TS + Vite] 将所展示文本内容的换行与空格显示出来
最新发布
qq_45831414的博客
07-12 499
pre>
vue 标签下文本换行
10-12 8252
标签中添加 v-html = "msg"，输出真正的html，msg内容中添加&lt;br&gt; msg  为 data 中的字段 示例： &lt;h1 v-html="msg"&gt;{{ msg }}&lt;/h1&gt; data () {     return {       msg: '需要换行&lt;br&gt;的字符串'     }   }...
vue 文本中的\n 、＜br＞换行显示
CC酱写前端的博客
05-08 4133
注意： style中white-sapce: pre-wrap;一、背景： 后端接口返回数据以\n 作为换行符，前端显示时候需要换行显示；二、br 换行（可以使用v-html）三、把br替换成\n换行。
vue中动态添加class类名的方法
10-18
在`methods`选项中定义`setClass`方法，它返回一个字符串或数组，Vue会根据返回值添加对应的类名。 ```javascript export default { // ... methods: { setClass () { return 'p1'; // 返回的字符串会被当作...
在vue中动态添加class类进行显示隐藏实例
10-16
当使用数组时，数组中的每个元素可以是一个字符串（表示静态class），也可以是一个对象（表示基于数据的条件class）。 总结来说，Vue.js中的动态class机制使得我们可以轻松地根据数据模型来控制DOM元素的显示和隐藏...
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
10-15
但有时会发现，在操作过程中无法对未定义的值、空值或基本数据类型（基元值，如字符串、数字等）设置反应属性，这会引发错误提示：“Cannot set reactive property on undefined, null, or primitive value”。...
Vue.js的模板语法详解
10-15
Vue.js 是一款流行的前端JavaScript框架，它通过使用简洁的模板语法，使得开发者能够声明式地将数据渲染进DOM中，实现数据和视图之间的动态同步。Vue.js模板语法的设计借鉴了Angular.js和Knockout.js等框架，并简化...
vue识别\n换行
易小哼唧的博客
04-23 2490
vue识别\n换行
vue+element-ui处理文本中的\n和《br/》
静幽水
10-10 5378
在我们使用vue+element-ui开发web应用的时候，有的时候从数据库中获取到的数据包含换行符\n或者<br>标签
c#基础入门（3）——异常、三元表达式、转义符、类型转换
xiaouncle的博客
07-27 3372
异常 try{}catch(Exception ex){}，try-catch之间不能有任何代码； 当try-catch在循环结构中时，发生异常不会跳出循环结构； 方法A中调用了方法B，如果B中抛出了异常但是B中没有异常处理机制，就会把异常交给父方法A处理，如果A中也没有异常处理机制，那就会交给Main方法处理，直到抛出系统异常。 try { string strNull =
Vue用＜br＞自定义换行，用v-html渲染，hover的时候title也需要使用自定义换行或者显示一行用省略号展示，hover展示全部
m0_59157023的博客
12-15 1020
哈喽 大家好啊,最近遇到一个需求：用自定义换行，hover的时候title也需要使用自定义换行然后我便想到了用自定义换行，然后用v-html渲染，则就正常显示了。
Vue中常用到的标签和指令
hulin的博客
08-01 2070
Vue中常用到的标签和指令
页面上出现br字符
bdy9600的专栏
05-19 765
if(StringUtils.isNotBlank(reason)){ reason = reason.replace("","\r\n "); }
vue 文本中的\n 、＜br＞进行换行显示
热门推荐
qq_41287158的博客
06-05 1万+
效果图 br换行可以使用v-html <p v-html="info"></p> data() { return { activeName: 'first', info: '1、优化批量上传图片<br/>2、优化时间' } }, \n 换行 <p style="white-space: pre-wrap;">{{ info }}</p> data() { return { info:
vue2中style三元表达式
08-26
在Vue 2中，你可以使用三元表达式在`<style>`标签中动态绑定样式。以下是一个示例： ```vue <template> <div :class="{'red': isRed}"> <p :style="isBold ? 'font-weight: bold' : ''">Hello, world!</p> </div> </template> <script> export default { data() { return { isRed: true, isBold: false }; } }; </script> <style> .red { background-color: red; } </style> ``` 在上面的示例中，我们使用`:class`来动态绑定类名，根据`isRed`的值决定是否添加`red`类。使用`:style`动态绑定样式，根据`isBold`的值决定是否设置`font-weight: bold`样式。 请注意，在`:style`绑定中，可以直接写内联样式字符串，也可以使用一个返回样式对象的计算属性。 希望这个示例能帮助到你！如果有任何问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值