v-if小案例---實現點選切換登入方式

阿新 • • 發佈：2021-01-16

技術標籤：筆記

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div id=" 
div">
 <form action="">
<label for="input" v-if="index==true">使用者名稱登陸</label>
<label for="input" v-else-if="index==false">電子郵箱登陸</label>
<br>  
<input type="text" id='input'> 
<p style=" 
font-size: 3px;display: inline;cursor: pointer;" @click='change'> 切換登陸方式 </p>
<br>
<p style="display: inline;">密碼</p>
<br>
<input type="password" id='input'>
</form>                                     
</div>
</body>
</html 
> 
<script src="vue.js"></script>
<script>
   const app=new Vue({
       el:'#div',
       data:{
           index:true,
           num:1
       },
       methods:{
           change(){
              
                this.num++;
                if(this.num%2==1){
                   this.index=true
                }  
                else{
                    this.index=false
                }
                console.log(this.num);
                console.log(this.index);
               
           }
       }
   })
</script>

在這裡插入圖片描述

v-if小案例---實現點選切換登入方式

技術標籤：筆記 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

小程式實現點選tab切換左右滑動

本文例項為大家分享了小程式實現點選tab切換左右滑動的具體程式碼，供大家參考，具體內容如下

微信小程式實現點選導航條切換頁面

本文例項為大家分享了微信小程式實現點選導航條切換頁面的具體程式碼，供大家參考，具體內容如下

微信小程式實現點選生成隨機驗證碼

本文例項為大家分享了微信小程式實現點選生成隨機驗證碼的具體程式碼，供大家參考，具體內容如下

微信小程式實現點選頁面出現文字

本文例項為大家分享了微信小程式實現點選頁面地方出現文字的具體程式碼，供大家參考，具體內容如下

vue3.0實現點選切換驗證碼(元件)及校驗

本文例項為大家分享了vue3.0實現點選切換驗證碼(元件)及校驗的具體程式碼，供大家參考，具體內容如下

微信小程式實現點選導航標籤滾動定位到對應位置

本文要實現的是點選標籤滾動定位到對應位置，且給在當前板塊範圍指定的導航標籤新增樣式

使用jQuery實現點選切換不同內容的程式碼的優化

技術標籤：jQueryjavascript 使用jQuery實現點選切換內容 css樣式如下： * {margin: 0;padding: 0;}

JavaScript實現點選切換驗證碼及校驗

本文例項為大家分享了JavaScript實現點選切換驗證碼及校驗的具體程式碼，供大家參考，具體內容如下

JavaScript實現點選切換功能

本文例項為大家分享了JavaScript實現點選切換功能的具體程式碼，供大家參考，具體內容如下

用js實現點選切換+自動切換的輪播圖

技術標籤：前端用js實現點選切換+自動切換的輪播圖之前博主寫過一篇用css實現輪播圖的文章,可以看到用css實現的輪播圖也能實現我們所需要的功能。那麼這些功能用js該如何實現呢？我們一起來看下吧！

el-tabs vue element-ui 標籤實現點選切換元件簡單

在寫專案過程中有以下這個需求。如果使用el-tabs標籤頁會使頁面程式碼過多且不適合維護。所以使用了以下方法進行了修改，非常簡單。

js實現點選切換卡片功能

本文例項為大家分享了實現點選切換卡片功能的具體程式碼，供大家參考，具體內容如下

JS實現點選切換頁面

今天學習了JS和html結合的，點選來切換到不同內容顯示。 <!DOCTYPE html> <html>

vue中商品詳情頁面佈局及功能實現點選小圖切換大圖

需求：點選下方小圖時，上方大圖轉換為相對應小圖。程式碼實現部分 HTML部分

微信小程式點選切換樣式scroll-view實現程式碼例項

這篇文章主要介紹了微信小程式點選切換樣式scroll-view實現程式碼例項,文中通過示例程式碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

Response-案例驗證碼-程式碼實現、點選切換

Response-驗證碼-程式碼實現 package com.example.day_14_response; import javax.imageio.ImageIO; import javax.servlet.ServletException;

android 使用kotlin 實現點選更換全域性語言(中日英切換)

> 因為我的工作要用kotlin所以今天在這裡給大家總結一下關於全域性語言切換的kotlin語言實現實現，很簡單，希望在這裡可以幫助到有需要的同學，下面簡單說一下實現步驟，會把執行截圖放在最後<

微信小程式如何實現點選圖片放大功能

這篇文章主要介紹了微信小程式如何實現點選圖片放大功能,文中通過示例程式碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

原生js實現點選輪播切換圖片

本文例項為大家分享了js實現點選輪播切換圖片的具體程式碼，供大家參考，具體內容如下