21.组件-动态数组---(vue入门文档学习记录)

谁借莪１个温暖的怀抱￠ 2023-08-17 16:48 100阅读 0赞

## 动态数组 ##

1.动态数组顾名思义是指动态的绑定数组.具体使用如下:

<div id="app-9">
    			
    			<button v-for="tab in tabs" v-bind:key="tab" v-on:click="currentTab = tab"> {
       { tab }} </button>
    			
    			<component v-bind:is="currentComponent" ></component>
    		</div>
    	
    		<script type="text/javascript">
    			// 三个组件
    			Vue.component("tab-home",{
    				template:'<div>Home component</div>'
    			})
    			Vue.component("tab-post",{
    				template:'<div>Post component</div>'
    			})
    			Vue.component("tab-archive",{
    				template:'<div>Archive component</div>'
    			})
    			
    			// vue 实例
    			new Vue({
    				el:'#app-9',
    				data:{
    					currentTab:'Home',
    					tabs:['Home','Post','Archive']
    				},
    				computed:{
    					currentComponent:function (){
    						return 'tab-'+this.currentTab.toLowerCase()
    					}
    				}
    			})

我们可以看到,定义了三个组件,通过 声明这是一个组件,通过v-bind:is="组件名"来绑定数组,通过计算属性计算出组件名,通过点击事件来改变currentTab,计算出不同的组件名,从而达到动态添加数组的目的

发表评论取消回复

表情：

评论列表（有 0 条评论，100人围观）

还没有评论，来说两句吧...

相关阅读

相关 17.2列表渲染之数组更新检测 ---(vue入门文档学习记录)

变异方法 Vue 将被侦听的数组的变异方法进行了包裹,这些方法包括: push() pop() shift() unshift() ...

深藏阁楼爱情的钟/ 2024年04月18日 09:29/ 0 赞/ 56 阅读

相关 21.组件-动态数组---(vue入门文档学习记录)

动态数组 1.动态数组顾名思义是指动态的绑定数组.具体使用如下:  <div id="app-9"> <!--遍

谁借莪１个温暖的怀抱￠/ 2023年08月17日 16:48/ 0 赞/ 101 阅读

相关 20.组件-插槽---(vue入门文档学习记录)

插槽有的时候我们需要向模板里面插入文字,活着其他的东西,我们如何做呢?这时候,就需要插槽来实现了.就相当于,组件给你留了一块自己动手去填的地方,下面先上代码:

Bertha 。/ 2023年08月17日 16:46/ 0 赞/ 112 阅读

相关 3.条件与循环---(vue入门文档学习记录)

条件 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title

水深无声/ 2022年10月01日 07:54/ 0 赞/ 156 阅读

相关 1.第一个vue.js---(vue入门文档学习记录)

声明式渲染 Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统： <!DOCTYPE html> <html>

小灰灰/ 2022年10月01日 07:54/ 0 赞/ 165 阅读

相关 5.组件化应用构建---(vue入门文档学习记录)

组件化应用构建 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <

矫情吗；*/ 2022年01月17日 00:59/ 0 赞/ 197 阅读

相关 8.插值---(vue入门文档学习记录)

文本数据绑定最经常用的就是"Mustache"语法(两个大括号)的文本插值,注意这里特别标明只是文本插值,如果是html格式也会只显示文本. <span>Mess

爱被打了一巴掌/ 2022年01月12日 12:29/ 0 赞/ 267 阅读

相关 6.数据与方法---(vue入门文档学习记录)

数据与方法当一个 Vue 实例被创建时，它将 data 对象中的所有的属性加入到 Vue 的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新

桃扇骨/ 2022年01月11日 06:09/ 0 赞/ 207 阅读

相关 10.指令---(vue入门文档学习记录)

指令指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职

谁借莪１个温暖的怀抱￠/ 2022年01月06日 09:29/ 0 赞/ 200 阅读

相关 13.侦听属性 ---(vue入门文档学习记录)

侦听属性先看下面的例子: <div id="computed_props"> 千米 : <input type="text" v-model="ki

╰+攻爆jí腚メ/ 2021年12月16日 09:43/ 0 赞/ 263 阅读