Vue内置组件之component标签

Vue自带的标签有:component,transition,transition-group,keep-alive,slot在这里我先介绍component标签: 它是Vue内置的标签,它的用途是可以动态绑定我们的组件,根据数据不同更换不同的组件.比如:这个效果效果:代码如下:<body><div id="app"><comp...

黄庚中

19884人浏览 · 2019-03-25 15:41:05

黄庚中 · 2019-03-25 15:41:05 发布

Vue自带的标签有:component,transition,transition-group,keep-alive,slot
在这里插入图片描述
在这里我先介绍component标签: 它是Vue内置的标签,它的用途是可以动态绑定我们的组件,根据数据不同更换不同的组件.
比如:这个效果效果:

代码如下:

<body>
    <div id="app">
        <component :is="who"></component>
        <button @click="changeComponent">changeComponent</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let componentA={
            template:`<div>I am componentA</div>`
        }
        let componentB={
            template:`<div>I am componentB</div>`
        }
        let componentC={
            template:`<div>I am componentC</div>`
        }

      let app = new Vue({
        el: '#app',
        data:{
            who:'componentB'
        },
        components:{
            "componentA":componentA,
            "componentB":componentB,
            "componentC":componentC
        },
        methods: {
            changeComponent(){
                if(this.who=="componentA"){
                    this.who="componentB"
                }
                else if(this.who=="componentB"){
                    this.who="componentC" 
                }else{
                    this.who="componentA"  
                }
            }
        },
      })
    </script>
  </body>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^