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

Jun 29, 2017 pm 03:48 PM
template v-if instruction

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>
Copy after login

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 of this Website
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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to get items using commands in Terraria? -How to collect items in Terraria? How to get items using commands in Terraria? -How to collect items in Terraria? Mar 19, 2024 am 08:13 AM

How to get items using commands in Terraria? 1. What is the command to give items in Terraria? In the Terraria game, giving command to items is a very practical function. Through this command, players can directly obtain the items they need without having to fight monsters or teleport to a certain location. This can greatly save time, improve the efficiency of the game, and allow players to focus more on exploring and building the world. Overall, this feature makes the gaming experience smoother and more enjoyable. 2. How to use Terraria to give item commands 1. Open the game and enter the game interface. 2. Press the &quot;Enter&quot; key on the keyboard to open the chat window. 3. Enter the command format in the chat window: &quot;/give[player name][item ID][item quantity]&quot;.

VUE3 quick start: using Vue.js instructions to switch tabs VUE3 quick start: using Vue.js instructions to switch tabs Jun 15, 2023 pm 11:45 PM

This article aims to help beginners quickly get started with Vue.js3 and achieve a simple tab switching effect. Vue.js is a popular JavaScript framework that can be used to build reusable components, easily manage the state of your application, and handle user interface interactions. Vue.js3 is the latest version of the framework. Compared with previous versions, it has undergone major changes, but the basic principles have not changed. In this article, we will use Vue.js instructions to implement the tab switching effect, with the purpose of making readers familiar with Vue.js

Vue error: The v-if directive cannot be used correctly for conditional rendering. How to solve it? Vue error: The v-if directive cannot be used correctly for conditional rendering. How to solve it? Aug 19, 2023 pm 01:09 PM

Vue error: The v-if directive cannot be used correctly for conditional rendering. How to solve it? In Vue development, the v-if directive is often used to render specific content in the page based on conditions. However, sometimes we may encounter a problem. When we use the v-if instruction correctly, we cannot get the expected results and receive an error message. This article will describe a solution to this problem and provide some sample code to aid understanding. 1. Problem Description Usually, we use the v-if directive in the Vue template to determine whether

v-if function in Vue3: dynamically control component rendering v-if function in Vue3: dynamically control component rendering Jun 19, 2023 am 08:31 AM

v-if function in Vue3: dynamic control of component rendering Vue3 is one of the most commonly used frameworks in front-end development. It has features such as parent-child component communication, two-way data binding, and responsive updates, and is widely used in front-end development. . This article will focus on the v-if function in Vue3 and explore how it dynamically controls the rendering of components. v-if is a directive in Vue3 that is used to control whether a component or element is rendered into the view. When the value of v-if is true, the component or element will be rendered into the view; and when v

Which one has higher priority, v-if or v-for in vue? Which one has higher priority, v-if or v-for in vue? Jul 20, 2022 pm 06:02 PM

In vue2, v-for has a higher priority than v-if; in vue3, v-if has a higher priority than v-for. In vue, never use v-if and v-for on the same element at the same time, which will cause a waste of performance (each rendering will loop first and then perform conditional judgment); if you want to avoid this situation, Templates can be nested in the outer layer (page rendering does not generate DOM nodes), v-if judgment is performed at this layer, and then v-for loop is performed internally.

Data visualization through Golang's Template package Data visualization through Golang's Template package Jul 17, 2023 am 09:01 AM

Data visualization through Golang's Template package. With the advent of the big data era, data visualization has become one of the important means of information processing and analysis. Data visualization can present data in a concise and intuitive way, helping people better understand and analyze data. In Golang, we can use the Template package to implement data visualization functions. This article will introduce how to use Golang's Template package to achieve data visualization and provide code examples. GolangTem

Detailed explanation of v-if function in Vue3: application of dynamically controlling component rendering Detailed explanation of v-if function in Vue3: application of dynamically controlling component rendering Jun 18, 2023 pm 02:21 PM

Detailed explanation of the v-if function in Vue3: Application of dynamically controlling component rendering Vue3 is a popular front-end framework, and the v-if instruction is one of the commonly used ways to dynamically control component rendering. In Vue3, the application of v-if function has a wide range of uses. For front-end developers, it is very important to master the use of v-if function. What is the v-if function? v-if is one of the directives in Vue3, which can dynamically control the rendering of components based on conditions. v-if renders the group when the condition is true

Explore the infinite possibilities of the input method that comes with MC commands (an innovative tool to create a perfect gaming experience - the input method that comes with MC commands) Explore the infinite possibilities of the input method that comes with MC commands (an innovative tool to create a perfect gaming experience - the input method that comes with MC commands) May 02, 2024 pm 03:01 PM

Mobile devices have become an essential part of people's lives in modern society. Games have also become one of the main forms of entertainment in people's spare time. There are constantly people working on developing new tools and technologies to optimize gameplay and improve the gaming experience. The input method with its own MC command is one of the eye-catching innovations. And how it can bring a better gaming experience to players. This article will delve into the infinite possibilities of the built-in MC command input method. Introduction to the built-in MC command input method. The built-in MC command input method is an innovative tool that combines the functions of MC commands and intelligent input methods. This enables more operations and functions. By installing the input method on a mobile device, players can easily use various commands in the game. Enter commands quickly to improve game efficiency

See all articles