uniapp中v-for遍历渲染html文本的问题

harglo · 发表于 2022-9-26 18:53

本帖最后由 harglo 于 2022-10-9 12:09 编辑

uniapp开发微信小程序用v-for循环得到的文本（例如：数据），怎样实现只显示其中文本，不显示标签。
我的代码：

[HTML] 纯文本查看 复制代码

<view class="sugg-list" :key="flag">
                  <view class="sugg-item" v-for="(item, i) in searchResults" :key="i" @click="gotoDetail(item.id)" >
                        <view class="goods-name">
                                <!-- <text v-if="flag" class="goods-name">{{item.highlightFields.title}}</text> -->
                                <!-- <rich-text :nodes="item.highlightFields.title"></rich-text> -->
                                {{item.highlightFields.title}}
                        </view>
                        <uni-icons type="arrowright" size="16"></uni-icons>
                  </view>
                </view>

结果会将标签原样输出：
数据1
数据2
数据3
...

已解决，原来是数据问题，item.highlightFields.title这个数据是数组，用{{item.highlightFields.title}}直接输出看到有正确数据以为就是文本，但却是数组，正确获取这个数据要用item.highlightFields.title[0]，这样可以用：

[HTML] 纯文本查看 复制代码

<rich-text class="goods-name" :nodes="item.highlightFields.title[0]"></rich-text>

正常渲染数据里面的html标签了。

wwroot1 · 发表于 2022-9-26 18:58

harglo · 发表于 2022-9-26 19:07

wwroot1 发表于 2022-9-26 18:58

渲染成<rich-text nodes="["数据1"]"></rich-text>，但是显示空白了

harglo · 发表于 2022-9-26 19:09

wwroot1 发表于 2022-9-26 18:58

和直接使用rich-text标签一样

Takitooru · 发表于 2022-9-26 19:14

是不是你本身数据自带html标签？
你打印一下数据数组看看，是不是for后的val值里自带html标签了

harglo · 发表于 2022-9-26 19:29

Takitooru 发表于 2022-9-26 19:14
是不是你本身数据自带html标签？
你打印一下数据数组看看，是不是for后的val值里自带html标签了

遍历出来的文本数据自带em标签，就是文本数据里面的em标签在页面没有经过渲染就直接显示了，我想实现的是渲染em标签的效果（标签被渲染后不会显示在页面上）

Takitooru · 发表于 2022-9-26 20:07

harglo 发表于 2022-9-26 19:29
遍历出来的文本数据自带em标签，就是文本数据里面的em标签在页面没有经过渲染就直接显示了，我想实现的是 ...

使用vhtml指令试试

如下

 <view class="goods-name">
           <span v-html="rawHtml">{{item.highlightFields.title}}</span>
</view>

69之皇 · 发表于 2022-9-26 21:13

直接vhtml或者用正则把文本匹配出来再渲染

Takitooru · 发表于 2022-9-26 22:14

harglo 发表于 2022-9-26 19:29
遍历出来的文本数据自带em标签，就是文本数据里面的em标签在页面没有经过渲染就直接显示了，我想实现的是 ...

使用vhtml

 <view class="goods-name">
           <span v-html={{item.highlightFields.title}}></span>
</view>

或
加三个花边符号

 <view class="goods-name">
           {{{item.highlightFields.title}}}
</view>

feiyu361 · 发表于 2022-9-27 09:22

用 v-html 这个

帐号		自动登录	找回密码
密码			注册[Register]

[已解决] uniapp中v-for遍历渲染html文本的问题

个人中心