Vue3分支语法-登录注销

news2024/11/25 23:44:01

在这里插入图片描述
点击登录

点击注销登录

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- vue.js -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
    <!-- 分支语法 -->
    <div>
        <div v-if="user.name!=null"><h2>用户名：{{user.name}}</h2></div>
        <div v-else><button @click="login">点击登录</button></div>
        <div ><button @click="logout">注销登录</button></div>
    </div>
</div>
</body>
<script>
    // 引入
    const {createApp, ref} = Vue
    // 创建
    createApp({
        //setup 标记 Vue3 支持Vue3的语法 直接定义变量、函数都可以
        setup() {
            // const 常量 一般配合 ref（Vue3语法）把一个常量变成一个对象，这个对象默认拥有属性 value
            //变量 对象
            const user = ref({})

            //定义函数
            const login = () => {
                user.value.name = "mxq";
            }
            const logout = () => {
                user.value.name = null;
            }

            return {//只有返回的上面才可以使用
                user, login, logout,name
            }
        }
    }).mount('#app')
</script>
</html>