|
|
@@ -0,0 +1,32 @@
|
|
|
+<!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="app">
|
|
|
+ <!-- <div v-if="isLogin">用户名</div>
|
|
|
+ <div v-else>请登录</div> -->
|
|
|
+ <div v-if="loginName == 'admin'">管理员</div>
|
|
|
+ <div v-else-if="loginName == 'user'">普通用户</div>
|
|
|
+ <div v-else>未登录</div>
|
|
|
+ <!-- v-if 指令 功能类似于js中的if语句 可以根据表达式的结果来判断是否渲染元素 -->
|
|
|
+ <!-- 如果一次性渲染 建议使用v-if指令 -->
|
|
|
+ <!-- v-show 指令 功能类似于display属性 可以控制元素的显示与隐藏 -->
|
|
|
+ <!-- 如果频繁切换元素的显示与隐藏 建议使用v-show指令 -->
|
|
|
+ <div v-show="isLogin">已经成功登录</div>
|
|
|
+ </div>
|
|
|
+ <script src="./js/vue.js"></script>
|
|
|
+ <script>
|
|
|
+ new Vue({
|
|
|
+ el:"#app",
|
|
|
+ data:{
|
|
|
+ isLogin:false,
|
|
|
+ loginName:"admin"//admin管理员 user普通用户 no未登录
|
|
|
+ }
|
|
|
+ })
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
