关于vue现在要动态改变组件属性的说明v-for 动态改变v-text-field的label属性
//错误代码
<div>
<v-text-field v-for="item in items" :key="item.label"
label="{{item.label}}"  //或者 label={{item.label}}
single-line=single-line
box=box
></v-text-field>
</div>
<script>
export default{
data:(){
items:[
{label:"账号"},
{label:"密码"}
]
}
}
</script>
执⾏之后查看控制台打印的错误是 要改变属性如：
<div id="{{val}}">  use <div :id="val"> instead of
可以知道上⾯的更改text的label属性代码应该改为：
<div>
<v-text-field v-for="item in items":key="item.label"
:label="item.label"
single-line=single-line
box=box
></v-text-field>
</div>
然⽽还是报错，继续查看，跳到错误指导页⾯，可以看到componens data must be function，所以，我们的script应该更改为：
<script>
export default{
data:function(){
return{
items:[
{label:"账号"},
{label:"密码"}
]
}
}
}
</script>
好了页⾯完成，整体代码：
<template>
<v-app>
<v-toolbar>
<v-toolbar-title>⾸页</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items class="hidden-sm-and-down">
<v-btn flat>Python</v-btn>
<v-btn flat>Kotlin</v-btn>
<v-btn flat>Android</v-btn>
</v-toolbar-items>
</v-toolbar>
<div class="box">
<div>
<v-text-field v-for="item in items":key="item.label"
:label="item.label"
single-line=single-line
box=box
></v-text-field>text align center
</div>
<div >
<v-btn color="info">登录</v-btn>
<v-btn color="secondary">注册</v-btn>
</div>
</div>
</v-app>
</template>
<script>
export default{
data:function(){
return{
items:[
{label:"账号"},
{label:"密码"}
]
}
}
}
</script>
<style scoped>
.box{
position: absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-100px;
}
</style>
切记 组件的data must be function

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。