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>