Dynamically insert components in vue based on parsed html content

  1. A blog that uses segmentfalut"s hyperdown parser to parse markdown syntax.
  2. parsed into html insert shows new requirements. You need to click on the pop-up modal box to open
    3. with the source size.
  3. element-ui has corresponding components, but doesn"t know how to insert

the original html won"t parse components. I know it won"t work.
I haven"t learned how to use bootstrap + jquery before and I can"t insert vue components

I don"t know how to dynamically bind the modal box
to the element in the parsed html string. To put it bluntly, I want to achieve this dynamic picture magnification function.

at present, I have masturbated a rudimentary js. by myself for the time being. Er, I am not satisfied with it, which does not conform to the design concept of vue

.
Element-ui vue.js html5 javascript
Mar.13,2021

since you use Vue, don't use jQuery. For this requirement, you need to use the dynamic template (dynamic template), step like this:

1 you need to use the full version of vue (including compiler), instead of just runtime version). In webpack configuration, you need to add an alias, similar to

. 
vue: 'vue/dist/vue.js'

2. Then in the template file, embed the dynamic template in the following way 

<component :is="dynamicTemplate()" />
The

dynamicTemplate function needs to return the processed template content, similar to: 

return Vue.compile('<div>' + dynamicContent +'</div>')

another div, is set because the module of Vue needs a single root. If you rely on some components in the dynamic template content, these components need to be registered in advance and can be registered using the global module of vue.

Previous: How can I use clipboard.js to perform the replication function after the calling interface call is complete?

Next: SpringBoot&Mybatis appears Binding Invalid bound statement in @ Test

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu