时间戳

首页 > 解决方案 > VUE 在点击时更改组件

vue.js - VUE 在点击时更改组件

问题描述

我想做：主要组件“Test1”，然后单击（切换）组件“Test2”，然后单击（切换）组件“Test3。但是它会出现第一个组件并且单击时立即跳转到第三个组件

  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <component v-bind:is="component" />
    <button v-on:click="toggle()">Toggle</button>
    <button v-on:click="toggle1()">Toggle1</button>
  </div>
</template>
<script>
import Test from './components/Test.vue'
import Test2 from './components/Test2.vue'
import Test3 from './components/Test3.vue'
export default {
  name: 'app',
  components: {
    Test,
     Test2,
      Test3
  },
  data (){
    return {
      component:'Test'
    }
  },
  methods: {
    toggle() {
      this.component = Test;
      this.component = Test2;
      this.component = Test3
    },
    toggle1(){
       this.component = Test2
       this.component = Test;
    }
  }
}
</script>

标签： vue.js

解决方案

您可以定义方法如下

data: {
   return {
       counter: 1,
       component:'Test',
   }
},
methods: {
   toggle() {
      if (this.counter === 3) {
          this.component = 'Test';
          this.counter = 1;
      } else {
       this.counter += 1;
       this.component = `Test${this.counter}`;
     }
   }
}

并且可以只有一个按钮来切换

<button v-on:click="toggle()">Toggle</button>

推荐阅读