vue元件簡單實現登入退出切換

阿新 • • 發佈：2021-09-17

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <div id='app'>
        <forth-login></forth-login>
        <forth-login></forth-login>
        <forth-login></forth-login>
        <forth-login></forth-login>
    </div>
    <template id="forth">
        <h1 v-if 
='isLogin'>
            <button @click='isLogin = !isLogin'>登入</button>
            登入/註冊
        </h1>
        <h1 v-else>
            <button @click='isLogin = !isLogin'>退出</button>
            個人資訊
        </h1>
    </template>
    <script>
        // 
 第一個引數為元件名稱
        Vue.component('forth-login', {
            template: '#forth',
            data() {
                return {
                    isLogin: true
                }
            }
        })

        const vm = new Vue({
            el: '#app',
            data: {
                isLogin:  
true
            },
            methods: {
            },
        })
    </script>
</body>

</html>

vue元件簡單實現登入退出切換

<!DOCTYPE html> <html> <head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">

vue實現登入型別切換

本文例項為大家分享了vue實現登入型別切換的具體程式碼，供大家參考，具體內容如下

django 簡單實現登入驗證給你

這篇文章主要介紹了django 簡單實現登入驗證給你,文中通過示例程式碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

Vue基於iview實現登入密碼的顯示與隱藏功能

iview簡介 iView 是一套基於 Vue.js 的開源 UI 元件庫，主要服務於 PC 介面的中後臺產品。

一篇文章帶你使用Typescript封裝一個Vue元件(簡單易懂)

一、搭建專案以及初始化配置 vue create ts_vue_btn 這裡使用了vue CLI3自定義選擇的服務，我選擇了ts、stylus等工具。然後建立完專案之後，進入專案。使用快捷命令code .進入Vs code編輯器(如果沒有code .，需要

簡單實現登入重定向

loin.jsp介面 <html> <body> <h2>Hello World!</h2> <%--這裡的提交路徑，需要尋找到專案的路徑--%>

Java遊戲伺服器Condition元件(簡單實現)

public class CIConfig { //唯一id public int id; //條件型別 public ConditionType conditionType; //條件引數

vue元件中實現巢狀子元件案例

如何把一個子元件comment.vue放到一個元件中去 1、先建立一個單獨的 comment.vue 元件模板

vue使用swiper實現左右滑動切換圖片

本文例項為大家分享了vue使用swiper實現左右滑動切換圖片的具體程式碼，供大家參考，具體內容如下

詳解vue 元件的實現原理

元件機制的設計，可以讓開發者把一個複雜的應用分割成一個個功能獨立元件，降低開發的難度的同時，也提供了極好的複用性和可維護性。本文我們一起從原始碼的角度，瞭解一下元件的底層實現原理。

vue+Element-ui實現登入登錄檔單

本文例項為大家分享了vue+Element-ui實現登入登錄檔單的具體程式碼，供大家參考，具體內容如下

IDEA簡單實現登入註冊頁面

application.yml spring: datasource: username: root password: 123456 url: jdbc:mysql://localhost:3306/bd1906?serverTimezone=GMT%2B8

Vue導航守衛實現登入跳轉

Vue導航守衛實現登入跳轉在一個網站中，如果使用者在未登入的情況下是不允許操作登入後的功能，使用者如果點選後應該提示使用者進行登入而且跳轉到登入頁面。

vue中使用vue-i18n簡單實現國際化

技術標籤：vue.jses6 1、安裝 npm install vue-i18n--save 目錄結構目錄結構如下，en.js和zh.js分別是英文和中文的文字資訊。

js簡單實現照片自動切換

技術標籤：javascript 網頁程式碼 <div> <div><img src="img/1.jpeg" alt="" id="tt"></div>

Django之Auth模組實現登入,退出,自帶session 與認證功能的一個重要的模組auth模組

1. 什麼是Auth模組,有什麼用? django的auth的模組的使用: auth 是集合註冊,登入,登出,session 多個功能集合在一起的模組

Vue+Websocket簡單實現聊天功能

本文例項為大家分享了+Websocket簡單實現聊天功能的具體程式碼，供大家參考，具體內容如下

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

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

模擬vue單頁面應用hash模式切換效果簡單實現

程式碼簡單實現： <!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\">

vue實現簡單的登入彈出框

本文例項為大家分享了vue實現簡單的登入彈出框的具體程式碼，供大家參考，具體內容如下