点击登录
点击注销登录
<!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>
6842
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
