Your location:Tech News>News>Script>{} {} Scintillator and method of solving the problem of rendering vue

Latest News

{} {} Scintillator and method of solving the problem of rendering vue



  v-if and v-show may be the daily development of the two most commonly used commands, although it seems that the two functions are similar, but still there is a big difference between the two.

  v-if with v-show differences:

  V-if at the time of switching blocks, Vue.js a local compiler / unloading process, because among the v-if the template may also include data binding or sub-components.v-if the condition is true rendering, because it would ensure that the conditions which block the handover properly destroy and reconstruct the conditions within the block event listener and sub-assemblies.

  v-if is inert: If the condition is false at the time of the initial rendering, do nothing - the condition becomes true when the first local start compiling (Compile are cached).

  In contrast, v-show is much simpler - the element always be compiled and retained, simply based on the CSS switch.

  The biggest difference between the two is simple v-if only to meet the conditions will be compiled at the time, and v-show regardless of whether the condition is always compilation, v-show display and hide simply switch the CSS display property.

  Applicable scene:

  After understand the essential difference between the two when it''s appropriate with v-if anything, it also becomes easier with v-show.

  In general, v-if higher switching consumption v-show higher initial rendering consumption.So, if you need frequent switching v-show is better, if the conditions are unlikely to change at runtime v-if better.

  For example, now many pages at different ends of the performance is different, the most common is prompted to download the page will display when a lot of APP page open letter in the micro side, while inside the APP does not like this situation the state of each terminal it does not become suitable for v-if, when this display is opened in the download section APP when loading is not determined directly compiled.

  And as the page elements according to the different conditions show / hide such places with v-show is the most appropriate, since this is substantially as frequently switched to two states, as stated above, the switching consumption is less than v-show v-if''s.

  Many conditions

  Often require multiple condition determination code, but only vue v-if and v-else, no such instructions v-elseif.Although there is no similar instruction, but still there are several ways to solve this problem.

  Method One: template



  Method Two: partical

  Elements are registered partial slot, partial Vue is compiled at the time of insertion. Element itself will be replaced. Elements need to specify the name attribute.

  This cargo is reminiscent fragement javaScript native element, but it is not a thing.partial static and dynamic points, but to solve the above problems is necessary to use dynamic partial.


  // Register the partial

  Vue.partial ( ''my-partial'', ''

This is a partial! {{Msg}}







  To solve the problem of multiple conditions, we can think that each case of partial pre-registered their good, and then bind the partial name of the property to determine the conditions so that we can implement multiple conditional.


  1.v-if the template instruction may be applied to the packaging elements, and does not support the v-show templete

  2.When the v-show application on the component, because the priority of v-else directive will have problems, the solution is to replace v-else with another v-show

  Official example given below:

  // error



It may also be a component

  // correct approach



It may also be a component

  Vue hidden element when the page is loaded v-show set appeared cause flicker page

  When writing APP communities in some parts of the page with the v-show, refresh the page when it is found that even in the judgment is false logic should not display some elements will reveal a face, fleeting, fast small elements Fortunately, particularly if it is a big place it looks very unhappy, so he searched the Internet to see if a solution to the next, the results really have.

  Method a: v-cloak

  The official explanation on the word: This instruction remains on the element until the end of the compiler associated instances.

  This sentence confused look, immediately followed by said usage:

  And CSS rules such as when used together, this command can not hide compiled Mustache label until the instance is ready.

  That v-cloak instruction can be as binding as a CSS style CSS selectors CSS then this will remain in effect to the end of the compiler examples.

  Sample code:


It will not be displayed until the end of the compiler.

  [V-cloak] {

  display: none;





  Method two: v-text

  We will vue packet two braces, and then into the HTML, but internally vue, all double parentheses will be compiled into a v-text of instructions textNode.

  The benefits of using the v-text is always better performance, more importantly, to avoid FOUC (Flash of Uncompiled Content), which is a problem encountered with the above.

  Sample code:




  to sum up

  The above is a flashing {{}} when vue small series to introduce rendering problems and solutions, we want to help, if you have any questions please give me a message, Xiao Bian will promptly reply to your.In this I am also very grateful for the support of the home-site scripting!

  When vue using v-if v-show page flicker, vue in v-cloak resolve refresh or load flicker problem (Display variable) Detailed data vue rendering flicker problem vuejs in analytical solutions div flash: You may be interested in articles the reason appears blinking and flashing to prevent vue interpolation method v-once, v-text, v-html Detailed instructions vue study notes the v-text && v-html && v-bind Detailed solve Vue with v-html.js rendering html tag is not resolved the problem vue.using v-pre js and v-html output HTML Detailed example of operation in three ways to solve vue v-html tag element v-cloak style Vue vue prevent interpretation uses braces {} {} v- and v-text blinking html, v-cloak usage examples

Recommend article

Relate article