网站 › 『编程语言讨论求助区』 › uniapp中v-for遍历渲染html文本的问题

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

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

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

uniapp开发微信小程序用v-for循环得到的文本（例如：<em>数据</em>），怎样实现只显示其中文本，不显示<em>标签。
我的代码：
<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>
结果会将<em>标签原样输出：
<em>数据1</em>
<em>数据2</em>
<em>数据3</em>
...

已解决，原来是数据问题，item.highlightFields.title这个数据是数组，用{{item.highlightFields.title}}直接输出看到有正确数据以为就是文本，但却是数组，正确获取这个数据要用item.highlightFields.title，这样可以用：
<rich-text class="goods-name" :nodes="item.highlightFields.title"></rich-text>正常渲染数据里面的html标签了。

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

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

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

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


渲染成<rich-text nodes="["<em>数据1</em>"]"></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 这个

查看完整版本: uniapp中v-for遍历渲染html文本的问题