使用v-for和v-model将数据循环绑定

v-model可以将数据进行双向绑定,若数据以数据组的形势存在,绑定时可以用value.name的方式获取指定的value键中的name值对应的值。

<td v-model="value.store_user_id">{{value.store_user_id}}</td>

该写法可以轻松帮助我们寻找某一个特殊的值。

v-for可以将数据对象中的数据迭代输出,当数据对象很复杂时,可以用value, key方法简化。注意数据是以key:value的形势存储的,这里的key和value并不是实指的数据键值对,而是指在adminlist.data.data之后的那一层的所有键值对的抽象。

<tr class="text-c" v-for="(value, key) in adminlist.data.data">
......
</tr>

我使用了 v-for="(value, key) in adminlist.data.data"来表示循环迭代adminlist.data.data之后的那一层的所有键值对,用value.xxx来表示对应的值,并用v-model将其绑定。

<tr class="text-c" v-for="(value, key) in adminlist.data.data">
<td><input type="checkbox" v-bind:value="key" name=""></td>
<td v-model="value.store_user_id">{{value.store_user_id}}</td>
<td v-model="value.user_name">{{value.user_name}}</td>
<td v-model="value.password">{{value.password}}</td>
<td v-model="value.real_name">{{value.real_name}}</td>
<td v-model="value.is_super">{{value.is_super}}</td>
<td v-model="value.is_delete">{{value.is_delete}}</td>
<td v-model="value.wxapp_id" class="td-status"><span class="label label-success radius">{{value.wxapp_id}}</span></td>
</tr>

使用该方法可以将数据对象中的某些特定的值以某种方式迭代出来。

猜你喜欢

转载自blog.csdn.net/weixin_44724060/article/details/88146731