1. v-if In templates, you can render conditionally. The conditions are implemented by combining The sample code is as follows: <div id="app"> <p v-if="weather == 'sun'">Let's go to the park today! </p> <p v-else-if="weather == 'rain'">Go to the movies today! </p> <p v-else>Not going anywhere today! </p> </div> <script> let vm = new Vue({ el: "#app", data: { weather: 'sun' } }); </script> 2. Use v-if on <template> Sometimes we want to load multiple The sample code is as follows: <div id="app"> <template v-if="age<18"> <p>How many points do you have in math? </p> <p>How many points do you have in English? </p> </template> <template v-else-if="age>=18 && age<25"> <p>Are you married? </p> <p>Have you taken the postgraduate entrance examination? </p> </template> <template v-else> <p>Did you get a pay raise? </p> <p>How much is the salary? </p> </template> </div> <script> let vm = new Vue({ el: "#app", data: { age: 24 } }); </script> 3. Use keys to manage reusable elements In addition, in the template, If we allow users to switch between different login methods: <div id="app"> <template v-if="loginType === 'username'"> <label for="username">Username:</label> <input type="text" id="username" name="username" placeholder="username"> </template> <template v-else> <label for="email">Email</label> <input type="text" id="email" name="email" placeholder="Email"> </template> <div> <button @click="changeLoginType">Switch login type</button> </div> </div> <script> const app = new Vue({ el: "#app", data: { loginType: "username" }, methods: { changeLoginType(){ // If the type is username, switch to email, otherwise this.loginType = this.loginType==="username"?"email":"username"; } } }) </script> Next, let’s look at the effect diagram: There will be a problem here. If I enter the information in the The sample code is as follows: <div id="app"> <template v-if="loginType === 'username'"> <label for="username">Username:</label> <input type="text" id="username" name="username" placeholder="username" key="username"> </template> <template v-else> <label for="email">Email</label> <input type="text" id="email" name="email" placeholder="Email" key="email"> </template> <div> <button @click="changeLoginType">Switch login type</button> </div> </div> We can see that when the user name
4. v-show Another option for conditionally showing elements is the <h1 v-show="ok">Hello!</h1> The difference is that elements with
4.1 v-if vs. v-show In comparison, Generally speaking, This is the end of this article about vue conditional rendering v-if and v-show. For more related vue conditional rendering content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: Why Nginx is better than Apache
>>: Detailed explanation of DIV+CSS naming rules can help achieve SEO optimization
Overview Operations on any one database are autom...
Preface MySQL query uses the select command, and ...
<br />Hello everyone! It’s my honor to chat ...
0. Prepare relevant tables for the following test...
Table of contents JS reads file FileReader docume...
When we open the source code of a regular website...
The query data in the xml price inquiry contains ...
Learn a jQuery plugin every day - floating menu, ...
Solution: Directly in the directory where you dow...
This article is from Tom Ewer's Managewp blog,...
1. Installation environment 1. HUAWEI mate x cpu ...
Reproduce on Kali First set suid permissions for ...
https://docs.microsoft.com/en-us/windows/wsl/wsl-...
Method 1: Modify the .bashrc or .bash_profile fil...
Table of contents 1. Anonymous slots 2. Named slo...