“This is the fifth day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

1. Project background

Is to display an entire HTML page transferred by the back end on the page, the HTML page code is shown below

Embed the code for these HTML pages into the page element div for page presentation

2. Popover encapsulation

In the popover window according to the incoming HTML data different pages do different display content

<div class=""> <el-dialog title=" prompt "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, }, Watch :{' dialog.showdata '(){this.showhtml ()}}, methods:{ showHtml(){ // 1. Start by dynamically creating a container tag element such as DIV let DIV = document.createElement(' DIV ') // 2. The string to be converted is set to innerHTML of the element (ie, Firefox, and Google support it) div.innerhtml = this.dialog.showdata // 3. We return the innerText or textContent of the element, which is the HTML decoded string. let html=div.innerText||div.textContent div=null this.html=html } }, } </script>Copy the code

3. Page debugging problem — illegal call

The reason for this problem is that new people do not know the difference between computed attributes and methods. According to the official document, the summary is as follows:

For any complex logic, you should use computed properties. The rest can be handled by methods.

Of course, I use simple processing logic, is the page display element HTML declaration in data, so that there is no such error, each new value assigned and stored in data

4. Knowledge expansion

Calculated attributes:
You can think of it as being able to write properties of computational logic in there.Copy the code
Function:
  • Reduce the calculation logic in the template \
  • Data caching. When our data does not change, no calculation is performed
  • Depends on a fixed data type (reactive data), not just a global data passed in

When modifying the value of a computed attribute, you need to be careful that you cannot directly modify the value of a computed attribute. You need to define get and SET methods in computed attributes,

For more information on the calculated properties, follow the following tweets 😄😄😄 ✌️