Vue-组件4 组件切换

Leisure Tea

于 2019-12-21 18:23:29 发布

阅读量146

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/SevenSongyun/article/details/103647051

版权

组件切换一、组件切换方式1—component元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script src="../lib/vue.js"></script> <style> ....

摘要由CSDN通过智能技术生成

Vue-组件4 组件切换

一、组件切换方式1—component元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../lib/vue.js"></script>
    <style>
        .comSty {
    
            border: 1px solid black;
            width: 255px;
            padding: 10px;
        }
        .labelSty {
    
            width:80px;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div id="app">
<!--        4 两个超链接，用来切换组件-->
        <a href="" @click.prevent="showComId='login'">登录</a>
        <a href="" @click.prevent="showComId='register'">注册</a>
<!--        5 用component元素来显示组件，is属性为显示组件的id-->
        <component :is="showComId"></component>
    </div>

<!--    1.定义两个组件模板，登录和注册-->
<!--        1.1 登录组件模板-->
    <template id="tmp-login">
        <div class="comSty">
            <label for="username" class="labelSty">用户名：</label><input id

最低0.47元/天解锁文章

Leisure Tea

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue-组件4 组件切换

组件切换一、组件切换方式1—component元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script src="../lib/vue.js"></script> <style> ....
复制链接

扫一扫

专栏目录