HTML#6(Vue3)

最新推荐文章于 2024-05-06 20:52:53 发布

我来读心喽

最新推荐文章于 2024-05-06 20:52:53 发布

阅读量114

点赞数

分类专栏： HTML 文章标签： html 前端 java

本文链接：https://blog.csdn.net/weixin_49191241/article/details/126753347

版权

HTML 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

2022.9.7,继续肝Vue

component组件可以进行动态切换界面效果

Component

用来切换不同的vue组件(即把不同html封装在不同vue里面，类似于多网页编程但实际上还是只有一个html文档，按下返回或者刷新还是会直接回到首页)

<template>
    <component :is="current"></component>
</template>
current就是从mylogin.vue里面引入的组件
<script>
import current from "./myLogin.vue";
export default{
    data() {
            return {
                show : true,
                access : false,
                mainShow : false,
                current : current,
            }
        }
    }
    components :{
        current;
    }
</script>

tips：

1、document.getElementById("Login").innerHTML = "注册界面"; innerHTML是直接显示内容，也就是<div> 1234 </div>里面的1234

2、document.getElementById("account").setAttribute("placeholder","输入注册的ID");可以修改setAttribute里面对应属性的内容，比如这里就是把placeholder属性改成了"输入注册的ID"

3、setTimeout(func|code, delay) delay(毫秒)时间后执行func or code

4、document.querySelector('body').setAttribute('style', 'background-color:#f7a1c5') 修改背景颜色

今天把注册界面的UI写出来了，用了transition实现了界面切换功能