Vue2.x和Vue3.x v-for中还可以这样解构赋值

简介: 本文介绍了在Vue 2.x和Vue 3.x中使用`v-for`指令时,如何通过对对象进行解构赋值来简化模板中的代码,并通过实例展示了在`data`中的熟悉如何通过解构来请求接口的值。

通过node接口获取数据:

    const getQueryAllUserInfo = () => {
      axios.get("user/queryAllUserInfo").then(res => {
        res.code === "200" && (tableData.value = res.data);
        console.log(tableData.value);
      });
    };

在这里插入图片描述
在页面上使用:
本质是对象的解构赋值

    <div class="testDiv" 
    v-for="{username:name,uuid,sex,codeStr:code} in tableData" 
    :key="uuid">
      <p>姓名:{
  {name ||  "空"}}</p>
      <p>uuid:{
  {uuid  ||  "空"}}</p>
      <p>性别:{
  {sex ||  "空"}}</p>
      <p>位置:{
  {code ||  "空"}}</p>
    </div>

在这里插入图片描述

目录
相关文章
|
2月前
vue3 中 h 函数的使用
vue3 中 h 函数的使用
49 0
|
3月前
|
存储 JavaScript 前端开发
vue在页面使用Vue.prototype全局变量
【6月更文挑战第3天】Vue.prototype 是 Vue 实例的原型对象,用于添加全局属性和方法。通过修改 Vue.prototype,所有 Vue 实例都能访问这些属性和方法。例如,可在 mai
135 1
|
4月前
第6节:Vue3 调用函数
第6节:Vue3 调用函数
148 0
|
4月前
|
JavaScript 小程序
vue 三种传值方法
vue 三种传值方法
|
11月前
|
JavaScript 前端开发 API
06Vue - Vue实例(构造器)
06Vue - Vue实例(构造器)
41 0
|
JavaScript
vue 组件传值
vue 组件传值
72 0
|
JavaScript 开发者
Vue(Vue2+Vue3)——26.组件的嵌套、27.VueComponent构造函数
Vue(Vue2+Vue3)——26.组件的嵌套、27.VueComponent构造函数
|
缓存 JavaScript
Vue(Vue2+Vue3)——11.计算属性(computed)
Vue(Vue2+Vue3)——11.计算属性(computed)
|
JavaScript
小满Vue3第四十章(Vue响应性语法糖)
小提示 本章内容所讲的东西都是实验性的产物 暂时不要再生产环境使用,自己开发玩可以使用,不过大体框架应该不会变了。
95 0
小满Vue3第四十章(Vue响应性语法糖)
|
JavaScript
【Vue五分钟】五分钟了解vue的常用实例方法
在了解vue的常用的实例方法之前,我们应该先要了解其常用的实例属性,你能了解到的vue实例属性有哪些呢?小编在这里就列举了几个常用的vue实例的属性。大家可以一起参考学习一下。
【Vue五分钟】五分钟了解vue的常用实例方法