十九、Component 标签

最新推荐文章于 2024-06-21 11:09:47 发布

大话JAVA的那些事

最新推荐文章于 2024-06-21 11:09:47 发布

阅读量3k

点赞数

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

本文链接：https://blog.csdn.net/newbie_907486852/article/details/83445755

版权

Vue 专栏收录该内容

34 篇文章 1 订阅

订阅专栏

Component 标签

Component标签是Vue框架自定义的标签，它的用途就是可以动态绑定我们的组件，根据数据的不同更换不同的组件。（根据值的不同，选用不同的标签替换component标签）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>component-4</title>
</head>
<body>
    <h1>component-4</h1>
    <hr>
    <div id="app">
        //根据值的不同，选用不同的标签替换component标签
        <component v-bind:is="who"></component>
        <button @click="changeComponent">changeComponent</button>
    </div>


    <script type="text/javascript">
        //定义三个模板
        var componentA={
            template:`<div style="color:red;">I'm componentA</div>`
        }
        var componentB={
            template:`<div style="color:green;">I'm componentB</div>`
        }
        var componentC={
            template:`<div style="color:pink;">I'm componentC</div>`
        }
        var app=new Vue({
            el:'#app',
            data:{
                who:'componentA'//数据
            },
            components:{//声明三个组件（标签），属性里有模板
                "componentA":componentA,
                "componentB":componentB,
                "componentC":componentC,
            },
            methods:{
                changeComponent:function(){
                    if(this.who=='componentA'){
                        this.who='componentB';
                    }else if(this.who=='componentB'){
                        this.who='componentC';
                    }else{
                        this.who='componentA';
                    }
                }
            }
        })
    </script>
</body>
</html>

大话JAVA的那些事

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
十九、Component 标签

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n
复制链接

扫一扫

专栏目录