vue的v-for循环和动态组件

v-for循环

v-for可以遍历数组
在标签上添加v-for属性，但必须绑定key值

<template>
  <div>
    <label>v-for循环</label><br />
    <label v-for="(item,index) in arr" v-bind:key="index">{{item}}<br/></label>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',

  data () {
    return {
      arr: [1, 2, 3, 4]
    }
  }
}
</script>

<style scoped>
  /* 定义样式  scoped属性指在当前页面有效 */
</style>

动态组件

通过component标签来定义一个结构一样内容不同的组件，通过点击按钮来改变内容，从而达到类似选项卡的功能。

<template>
  <div>
    <button @click="changeA('test1')">test1</button>
    <button @click="changeA('test2')">test2</button>
    <button @click="changeA('test3')">test3</button>
    <component v-bind:is="a"></component>
  </div>
</template>

<script>
export default {
  name: 'Son',
  data () {
    return {
      a: 'test1'
    }
  },
  methods: {
    changeA (str) {
      this.a = str
    }
  },
  components: {
    test1: {template: '<div>test1</div>'},
    test2: {template: '<div>test2</div>'},
    test3: {template: '<div>test3</div>'}
  }
}
</script>

<style>
</style>