Home > Article > Web Front-end > Simple understanding of Vue conditional rendering_vue.js

Simple understanding of Vue conditional rendering_vue.js

不言Original: 2018-03-31 17:04:391114browse

This article mainly helps everyone to simply understand Vue conditional rendering. What is Vue conditional rendering, it has certain reference value. Interested friends can refer to it

1. v-if Display a single element

Note that else can only follow v-if or v-show

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>Vue条件渲染</title>
 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
 <p class="test">
 <p v-if="isDisplay"> <!--if...else... 单个元素-->
 显示我1
 </p>
 <p v-else>
 显示我2
 </p>
 </p>
 <script type="text/javascript">
 var myVue =new Vue({
 el: ".test",
 data: {
  isDisplay: 1
 }
 })
 </script>
 </body>
</html>

The output result is: show me 1

2. v-if displays multiple elements and needs to be matched with d477f9ce7bf77f53fbcf36bec1b69b7a

Note that else can only be followed by After v-if or v-show

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>Vue条件渲染</title>
 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
 <p class="test">
 <template v-if="isDisplay"> <!--if...else... 用template实现多个元素-->
 <p>显示我1</p>
 <p>显示我11</p>
 <p>显示我12</p>
 <p>显示我13</p>
 </template>
 <p v-else>
 显示我2
 </p>
 </p>
 <script type="text/javascript">
 var myVue =new Vue({
 el: ".test",
 data: {
  isDisplay: 1
 }
 })
 </script>
 </body>
</html>

output result: show me 1 show me 11 show me 12 show me 13

3. v-show only supports single element display, and does not support multiple elements contained in d477f9ce7bf77f53fbcf36bec1b69b7a

##Note that else can only follow v-if or v-show

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>Vue条件渲染</title>
 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
 <p class="test">
 <p v-show="isDisplay"> <!--if...else... 单个元素,注意注意 v-show 不支持 <template> 语法-->
 显示我1
 </p>
 <p v-else>
 显示我2
 </p>
 </p>
 <script type="text/javascript">
 var myVue =new Vue({
 el: ".test",
 data: {
  isDisplay: 1
 }
 })
 </script>
 </body>
</html>

4. The difference between v-if and v-show

(1)v-if It is real rendering and unloading, but after the first rendering, the result will be cached

(2) The v-show element is always compiled and retained, and is simply switched based on CSS

(3) Summary: If you need to switch v-show frequently, it is better. If the conditions are unlikely to change during runtime, v-if is better.

gitHub address: https://github.com/lily1010/vue_learn /tree/master/lesson08

Related recommendations:

Simple understanding of Vue conditional rendering

The above is the detailed content of Simple understanding of Vue conditional rendering_vue.js. For more information, please follow other related articles on the PHP Chinese website!

css if JS github https

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to operate js array to remove duplicatesNext article：How to operate js array to remove duplicates

See more

Simple understanding of Vue conditional rendering_vue.js

Related articles