Home >Web Front-end >JS Tutorial >Detailed explanation of using v-if directive in elements and templates

Detailed explanation of using v-if directive in elements and templates

零下一度Original: 2017-06-29 15:48:513474browse

This article mainly introduces you to the relevant information about the use of v-if instructions in elements and templates in Vue.js learning records. The article gives detailed sample codes for your reference and learning. I believe it will be of some use to you. The reference learning value, friends who need it can take a look below.

This article mainly introduces to you the relevant content about the use of v-if instructions in elements and templates of Vue.js. It is shared for your reference and learning. Let’s take a look at the detailed introduction:

The syntax is relatively simple, just enter the code directly:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <title></title>
 <script src="cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<p id="wangtuizhijiademo">
 <p v-if="instruction">在Vue.js中，当判断语句为true,可以显示信息，当为false时候不显示</p>
 <template v-if="show1">
  <p>我是 show1，默认是开启的（true），当你设置false我不显示！</p>
 </template>
 <template v-if="show2">
  <p>我是 show2，默认是关闭的，当你设置show2的值为true，我会被显示！</p>
 </template>
</p>

<script>
 new Vue({
  el: &#39;#wangtuizhijiademo&#39;,
  data: {
   instruction:true,
   show1: true,
   show2: false
  }
 })
</script>
</body>
</html>

true is the open state, false is the closed state.

#If you are interested, you can try changing show2: false from false to true. You can see two messages, as follows:

In Vue.js, when the judgment statement is true, the information can be displayed, and when it is false, it will not be displayed.

I am show1, which is enabled by default (true). When you set false, I will not display it!

I am show2, which is turned off by default. When you set the value of show2 to true, I will be displayed!

The above is the detailed content of Detailed explanation of using v-if directive in elements and templates. For more information, please follow other related articles on the PHP Chinese website!

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：Summary of vue.js event handler examplesNext article：Summary of vue.js event handler examples

See more

Detailed explanation of using v-if directive in elements and templates

Related articles