页面div-嵌入html的整个页面

「这是我参与11月更文挑战的第5天，活动详情查看：2021最后一次更文挑战」

1.项目背景

是要在页面上展示后端传输的一整个html的页面，html的页面代码如下所示

将这些html页面的代码嵌入到页面元素div当中做页面展示

2.弹窗封装

在弹窗中根据传入的html数据不同页面做不同的展示内容

<div class="">
   <el-dialog
   title="提示"
   top='30px'
   :visible.sync="dialog.Visible"
   width="50%"
   :destroy-on-close="true"
   >
      <div v-html="html"></div>
   </el-dialog>
</div>

<script>
export default {
  props:{
       dialog:Object,
  },
  data(){
    return {
        html:''
     }
  },
//页面监听传入数据的变化做不同变化的处理加载
watch:{
'dialog.showData'(){
     this.showHtml()
   }
},
 methods:{
   showHtml(){
   // 1.首先动态创建一个容器标签元素，如DIV
      let div = document.createElement('div')
   // 2.然后将要转换的字符串设置为这个元素的innerHTML(ie，火狐，google都支持)
      div.innerHTML=this.dialog.showData
   // 3.最后返回这个元素的innerText或者textContent，即得到经过HTML解码的字符串了。
      let html=div.innerText||div.textContent
      div=null
      this.html=html
   }
 },
}
</script>

3.页面调试问题---非法调用

上面这个问题，究其原因就是新人对“计算属性”：computed和“事件处理”：methods傻傻分不清楚。根据官方文档总结如下：

对于任何复杂逻辑，你都应当使用计算属性。其余可以使用methods处理。

当然我使用了简单的处理逻辑，就是将页面展示的元素html在data里做了声明，这样就不会出现这样的错误了，将每次新的值赋值和存储在data里

4.知识扩展

计算属性：

  可以理解为能够在里面写一些计算逻辑的属性。

作用：

• 减少模板中的计算逻辑\
• 数据缓存。当我们的数据没有变化时，不在执行计算的过程\
• 依赖固定的数据类型（响应式数据），不能是普通的传入的一个全局数据

修改计算属性的值的时候需要注意，不能直接修改计算属性的值报错，需要在computed中定义get和set方法，在修改计算属性中的值，

有关计算属性的详解，可关注后续的推文😄😄😄 ✌️