用Element -ui的Description组件动态展示组件内的信息

博主在使用Element的Description描述列表组件时,遇到无法通过Vue的V-model动态变化数据、连接数据库获取内容的问题。尝试多种方法后,用两个大括号包裹数据模型成功实现动态展示,经查询得知这是Vue.js的规定。

                今天遇到的问题是我想要创建一个展示个人信息的描述列表,然后我就找到了Element里面的Description描述列表组件

                但在使用的时候就发现了一个问题,就是这个列表中对应属性的内容时通过创建列表时输入好的,我就没有办法通过Vue中的V-model来动态变化这里面的数据,更没有办法连接数据库,来获取数据库里面的内容并让这个列表内容随之改变。

 

                于是,我尝试了各种各样的方法,先是找了我之前成功能够动态获取并且展示数据的方法,

 例如上图是个表单模型,我在表单里面使用了<el-input></el-input>,达到了通过v-model的数据模型来动态修改,展示数据的效果。但当我用到了描述列表中,又发现了问题

 

                 数据确确实实是动态展示出来了,但是,有个文本输入框,不符合我设计的预期。于是这个方法就pass掉。

                在我随便尝试的时候,我突然想到,之前好像有个用法就是两个大括号里面来传入数据模型,这样可以直接获取数据模型的值,于是我抱着试一试的心情用了这个方法。

结果成功了。

                但究竟为什么两个大括号里面包裹了数据模型就能达到效果呢。

                我上网查了相关资料,发现,这好像就是Vue.js中的规定。

                以后记得这么用就可以 

 

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值