关于vue现在要动态改变组件属性的说明

最新推荐文章于 2024-08-06 15:49:56 发布

原创最新推荐文章于 2024-08-06 15:49:56 发布 · 7.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #v-for #动态更改属性 #vuetify #label

vue2/vue3 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何在Vue中使用v-for动态改变v-text-field组件的label属性。通过示例代码和错误解析，详细解释了如何正确设置组件的data为函数，以避免报错并成功实现需求。

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>
 </div>
    <div style="text-align:center">
 <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