《Vue如何渲染文本》

Posted 2022-11-27 杨晓风-linda

背景

为适应业务需求，规则说明的固定内容转换为由接口动态获取，这就要求前端对规则说明的渲染改变技术方案~其中使用v-html渲染文本，需要注意的是顺序标签的渲染~

技术点

• Vue渲染文本的方式
• style属性scoped相关

技术点解析

Vue渲染文本的方式

• v-text
• v-html

v-text

• 将元素当成纯文本输出
• 相对比较安全
• 可简写为，支持逻辑运算
• 且不会出现一闪而过之后消失，重新渲染元素的体验，但是使用起来不如方便

 <p v-text="message"></p>

• 将元素当成纯文本输出
• 当页面渲染过大过慢时，会出现一闪而过之后消失重新渲染元素的体验

 <p>  </p>

v-html

• 将元素当成HTML标签解析后输出
• 存在安全性问题

 <p v-html="html"></p>

style属性scoped相关

定义

• HTML5中的新属性
• 数据类型为布尔类型

作用

• 实现组件的私有化
• 只作用于当前组件的元素
• 组件之间互不污染，实现模块化

原理

• css带属性选择器
• scoped会在DOM结构及css样式上加上唯一性的标记【data-v-something】属性

<style scoped>
.a >>> .b  /* ... */ 
</style>

将上述代码编译以后如下所示：

.a[data-v-f3f3eg9] .b  /* ... */ 

穿透

任何事物都有两面性，scoped也不例外，其使用起来虽然方便，但也会存在局限性。当需要修改公共组件时，便需要了解穿透的解决方案-深度作用选择器

• >>>
• /deep/  (sass或less) 如果使用/deep/报错或不生效，使用::v-deep
• 使用两个style标签，一个带scoped，一个不带scoped，用以达到修改第三方组件的目的

解决方案

• 使用v-html渲染接口获取的规则说明
• 去掉scoped修饰
• 在添加scoped属性的前提下，使用深度选择器进行样式穿透，成功渲染顺序标签

代码

方案一：v-html +  去掉scoped修饰

<template>
    <div class="rule-main">
        <div v-html="integralRule"></div>
    </div>
</template>

<script>

export default 
  data() 
    return 
      integralRule: ''
    
  ,
  mounted() 
    this.getRule()
  ,
  methods: 
    async getRule() 
      const res = 
        "data": "\\n <ol><li>suger and solt</li></ol>"
      
      this.integralRule = res.data
    
  

</script>

<style lang="less">
.rule-main 
    min-height: 100vh;
    padding: 10rpx 24rpx 30rpx 48rpx;
    color: #333;
    background: #f6f6f6;

ol, li 
  list-style: decimal;


</style>

方案二：v-html + scoped修饰 + 深度选择器

<template>
    <div class="rule-main">
        <div v-html="integralRule"></div>
    </div>
</template>


<style lang="less" scoped>
.rule-main 
    min-height: 100vh;
    padding: 10rpx 24rpx 30rpx 48rpx;
    color: #333;
    background: #f6f6f6;

/deep/ li 
  list-style: decimal;

</style>

UI

扩展

• 微信小程序使用<rich-text nodes="desc">渲染文本 
• Scoped CSS | Vue Loader