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>

在这里插入图片描述

目录
相关文章
|
JavaScript 前端开发
Vue3 ref响应式变量详解
Vue3 ref响应式变量详解
198 0
|
2月前
|
JavaScript
Vue 中mixin 的用法
【10月更文挑战第18天】Vue 中mixin 的用法
35 3
|
6月前
|
存储 JavaScript 前端开发
vue在页面使用Vue.prototype全局变量
【6月更文挑战第3天】Vue.prototype 是 Vue 实例的原型对象,用于添加全局属性和方法。通过修改 Vue.prototype,所有 Vue 实例都能访问这些属性和方法。例如,可在 mai
232 1
|
7月前
第6节:Vue3 调用函数
第6节:Vue3 调用函数
182 0
|
7月前
|
JavaScript 小程序
vue 三种传值方法
vue 三种传值方法
|
缓存 JavaScript
Vue3中computed的用法
Vue3中computed的用法
167 0
|
缓存 JavaScript API
Vue-computed用法
模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护,所以,对于复杂逻辑,vue 提倡使用计算属性。需要特别说明:计算属性的 getter 函数是没有副作用 (side effect) 的,这使它更易于测试和理解 — from Vue计算属性。 我们先看下 computed 和 methods 有何区别?
|
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
【Vue五分钟】五分钟了解vue的常用实例方法
在了解vue的常用的实例方法之前,我们应该先要了解其常用的实例属性,你能了解到的vue实例属性有哪些呢?小编在这里就列举了几个常用的vue实例的属性。大家可以一起参考学习一下。
【Vue五分钟】五分钟了解vue的常用实例方法