首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

获取在vue js上显示一个或另一个对象数组的两个值。

在Vue.js上显示一个或另一个对象数组的两个值,可以通过使用条件渲染和计算属性来实现。

首先,你需要在Vue实例的data中定义两个对象数组,例如:

代码语言:txt
复制
data() {
  return {
    array1: [
      { id: 1, name: '对象1' },
      { id: 2, name: '对象2' },
      // ...
    ],
    array2: [
      { id: 1, value: '值1' },
      { id: 2, value: '值2' },
      // ...
    ],
    selectedId: 1, // 默认选中的对象的id
  };
},

接下来,在模板中使用v-if或v-show指令根据条件来渲染不同的对象数组的值。可以根据selectedId的值来判断要显示哪个数组的值,例如:

代码语言:txt
复制
<template>
  <div>
    <div v-if="selectedId === 1">
      <ul>
        <li v-for="item in array1" :key="item.id">{{ item.name }}</li>
      </ul>
    </div>
    <div v-else>
      <ul>
        <li v-for="item in array2" :key="item.id">{{ item.value }}</li>
      </ul>
    </div>
  </div>
</template>

最后,你可以通过添加事件处理程序来改变selectedId的值,从而切换显示不同的对象数组的值。例如,可以在按钮的点击事件中切换selectedId的值:

代码语言:txt
复制
<template>
  <div>
    <button @click="selectedId = 1">显示对象数组1</button>
    <button @click="selectedId = 2">显示对象数组2</button>
    <!-- 根据selectedId的值切换显示的对象数组的值 -->
    <div v-if="selectedId === 1">
      <ul>
        <li v-for="item in array1" :key="item.id">{{ item.name }}</li>
      </ul>
    </div>
    <div v-else>
      <ul>
        <li v-for="item in array2" :key="item.id">{{ item.value }}</li>
      </ul>
    </div>
  </div>
</template>

这样,根据selectedId的值的不同,就可以在Vue.js上显示一个或另一个对象数组的两个值。

关于Vue.js的更多信息和使用方法,你可以参考腾讯云的产品介绍链接地址:Vue.js产品介绍

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

如何使用Vue.js和Axios来显示API中的数据

介绍 Vue.js是一个用于构建用户界面的前端JavaScript框架。 它的设计从头开始逐步采用,并与其他图书馆或现有项目完美集成。...Vue.js非常适合使用这些类型的API。 在本教程中,您将创建一个使用Cryptocompare API的Vue应用程序来显示两个主要加密货币的当前价格:比特币和Etherium。...在浏览器中打开此文件。 您将在屏幕上看到以下输出,其中显示模拟数据: 我们以美元显示价格。 要以额外的货币(例如欧元)显示它,我们将在数据模型中添加另一个键值对,并在标记中添加另一列。...第4步 - 从API获取数据 现在是时候用来自cryptocompare API的实时数据替换我们的模拟数据,以美元和欧元的形式在网页上显示比特币和以太坊的价格。...为了提出请求,我们将Vue中的mounted()函数与Axios库的GET函数结合使用来获取数据并将其存储在数据模型的results数组中。

8.8K20

Vue2学习计划五:v-on、v-model、v-if、v-for和v-show

调用时不加小括号,Vue会默认将浏览器产生的event事件当作实参传入 调用时只有小括号没有实参,此时在方法内部的形参为undefined 方法定义时有两个参数,一个是数据,另一个是浏览器产生的事件对象...调用时不加小括号,Vue会默认将浏览器产生的event事件当作第一个实参传入,第二个为undefined 调用时只有小括号没有实参,在方法内部的两个形参都为undefined 调用时只有一个实参...,在方法内部的另一个形参为undefined 注意: 调用时,要传入浏览器的事件对象,使用$event 方法定义时有参数,调用时不加小括号,默认第一个实参为浏览器事件对象 方法定义时有参数,调用时没有传入...v-model其实是一个语法糖,完全可以自己实现,它本质上是包含两个操作: v-bind绑定input元素的value值 v-on指令给当前元素绑定input事件 ...一般用于遍历数组和对象 遍历数组时,分为两种情况,需要索引值和不需要索引值

4.2K20
  • vue入门教程(一)「建议收藏」

    computed计算属性是用来声明式的描述一个值依赖了其它的值,当所依赖的值或者变量改变时,计算属性也会跟着改变; computed根据一个现有数据去生成一个新数据,并且这两个数据会永久的建立关系...,还会建立缓存,当无关数据改变的时候,不会重新计算而是直接使用缓存中的值; 我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存...Vue.js v-bind 在处理 class 和 style 时, 专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组。.../排序后的结果 有时,我们想要显示一个数组经过过滤排序后的版本,而不实际变更或重置原始数据。...在这种情况下,可以创建一个计算属性,来返回过滤或排序后的数组。 我们实现一个案例:展示姓名和年龄的数组列表。同时可以按照姓名筛选和年龄排序。

    1.1K20

    最新Web前端面试题精选大全及答案「建议收藏」

    如果让原型对象等于另一个原型对象的实例,此时的原型对象将包含一个指向另一个原型的指针(__proto__),另一个原型也包含着一个指向另一个构造函数的指针(constructor)。...Less既可以在客户端运行,在可以在服务端运行(需要借助node) Js中.call()与.apply()区别 apply:调用一个对象的一个方法,用另一个对象替换当前对象。...而不同之处在于传递的参数,apply最多只能有两个参数——新this对象和一个数组argArray,如果arg不是数组则会报错 相同点:两个方法产生的作用是完全一样的。...,那么会对新老节点进行对比,比较两者key是否相同,进行调换位置或删除操作 8.什么是计算属性 计算属性是用来声明式的描述一个值依赖了其他的值,当它依赖的这个值发生改变时,就更新DOM 当在模板中把数据绑定到一个计算属性上时...具名插槽和匿名插槽,作用域插槽,说白了就是在组件上的属性,可以在组件元素内使用, 可以在父组件中使用slot-scope从子组件获取数据 38.Watch请简述 Watch的作用是监控一个值的变化,并调用因为变化需要执行的方法

    1.5K20

    前端攻坚战

    Vue.js可以作为一个js库来使用,也可以用它全套的工具来构建系统界面,这些可以根据项目的需要灵活选择,所以说,Vue.js是一套构建用户界面的渐进式框架。...Vue的核心库只关注视图层,Vue的目标是通过尽可能简单的 API 实现响应的数据绑定,在这一点上Vue.js类似于后台的模板语言。...当这些属性的值发生变化,视图将会匹配到更新之后的值。上面的例子,通过一个方法,改变 data 对象中的属性,使视图中的值随之变化,演示了响应式。...下面举两个例子进行演示即可: 的布尔值来插入/移除 元素 --> 是否显示这一段 的属性值可以是表达式,vue.js在这一块做了增强。表达式结果除了是字符串之外,还可以是对象或者数组。

    1.2K10

    vue2.0知识点汇总

    angular核心: 模块化 双向数据绑定(脏检测:一个数组($watch),性能弱) 开发一个登陆模块,登陆需要显示的头部、底部、中部 组件:组合起来的一个部件(头部、底部、中部) 细分代码...一个样式: 返回字符串(三元表达式和 key和样式的对象清单) 多个样式: 返回对象(样式做key,true或false做值) <div v-bind...绑定事件 另一个组件引入统一个vuebus,来$emit(‘事件名’,prop1, prop2) 触发事件 vue高级 vue过滤器 获取dom元素 mint-ui vue组件的使用 组件间通信 vue-router...; 获取DOM元素 前端框架就是为了减少dom操作,特定情况下也提供了的操作方式 在指定的元素上,添加ref=”名称” 在获取的地方加入 this....$refs.名称 如果ref放在了原生DOM元素上,获取的数据就是元素DOM对象 如果ref放在组件对象上,获取的就是组件对象 获取子组件DOM对象,通过this.refs.sub.refs.sub.el

    6.6K70

    Vue之组件化(三)

    cpn2> 1.2、为何需要父子组件的通信 每个组件的数据都存放在自己的data函数中,不可以直接使用其他组件或Vue实例(根组件)中的data数据。...那每一个组件中的数据都通过发送网络请求获取,甚至连蓝色框的用来显示物品详情的小组件也要发送网络请求获取动态数据,这会让网络请求的压力巨增,所以这种获取数据的方式显然是不可能的。...举例: 父组件通过$children的方法直接获取两个子组件对象 ...3.2、$children的缺点 利用$children获取到的数组类型,访问其中的组件必须通过索引值。...当子组件过多时,往往不能确定他的索引值,所以引进了新的父访子的方式$refs 3.3、直接父访子的缺点 虽然可以通过$children的方式直接获取子组件对象,进而获取子组件中的方法和数据,但是在一个组件中直接获取另一个组件去操作数据和方法的方式

    56520

    Vue2向Vue3过渡,持续记录

    (开发版,代码进行了压缩) 2.global 这四个版本都可以在浏览器中直接通过scripts标签导入,导入之后会增加一个全局的Vue对象 vue.global.js(完整版,包含编译器和运行时) vue.global.prod.js...当撰写包裹一个目标元素或另一个组件的组件时,这可能不会总是符合预期行为。通过设置 inheritAttrs 到 false,这些默认行为将会被去掉。...也对,这么明显的问题,vue不可能考虑不到,正经解释一下: 循环一个元素是对象的数组,既然是对象那就是引用,然后对象是响应式的,然后基于vue的响应式原理。...vue计算属性返回的是一个对象、或者数组的时候,修改这个对象的属性的时候不会触发set;如果是基础数据类型(返回的是数组或对象的基本数据类型的属性),才会触发set; 36.使用异步组件?.../Foo.vue') 提示 vue简单的小组件就别用异步组件了,会导致加载闪烁(网页显示,然后等待网络加载,才显示) 37.关于vue3中的v-model 在原生html元素上使用

    5.9K40

    MVVM之Vue源码分析

    本系列文章将会围绕Vue框架中涉及到的技术进行一系列的分析,在本文中: 我会首先介绍几个涉及JS方面的知识,然后着重对于实现一个MVVM框架的三大基本原理(即数据代理、模板解析、数据绑定)进行介绍,在接下来的几篇文章中会对涉及到的其他技术...: 首先这两个方法都是接收一个伪数组作为参数,但是从执行效率上讲: ?...Object.defineProperty: 会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回这个对象....数据绑定: 一般来讲,数据绑定包括两个方面:初始化显示和更新显示.所谓数据绑定,是指一旦更新了data中的某个属性数据,所有页面上直接使用或间接使用此属性的节点都会更新,实现这个功能的效果就是数据劫持....通俗点讲,当页面初始化的时候,通过get方法会建立watcher与dep的关系,函数调用栈如下: ? 在Observer.js中,有一个subs[],里面保存的是n个watcher的数组容器.

    86330

    2022年最新前端面试题(大前端时代来临卷起来吧小伙子们..持续维护走到哪记到哪)

    堆: 是一种非连续的树形储存数据结构,具有队列优先,先进先出; 每个节点有一个值,整棵树是经过排序的。特点是根结点的值最小(或最大),且根结点的两个子树也是一个堆。...赋的是具体的值 引用数据类型传的是地址,一个变另一个跟着变 js数据类型转换 在JavaScript中类型转换有三种情况: 转换为数字(调用Number(),parseInt(),parseFloat...1.浅拷贝: 将原对象或原数组的引用直接赋给新对象,新数组,新对象只是对原对象的一个引用,而不复制对象本身,新旧对象还是共享同一块内存 如果属性是一个基本数据类型,拷贝就是基本类型的值,如果属性是引用类型...怎么获取传过来的值 在 router 目录下的 index.js 文件中,对 path 属性加上 /:id,使用 route 对象的 params.id 获取 Vue-router共有几种模式?...,我们在router.js文件中的定义路由里,将需要登陆权限的页面加上meta属性,值是对象的形式,然后在该对象中自定义一个属性,属性值就是一个Boolean值,这时候在main.js文件的全局钩子函数中进行判断

    3.4K10

    【编程鹿】学Vue.js这一篇就够了「万字学会|通俗易懂」上篇

    应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 在构造函数中传入一个对象,并且在对象中声明各种Vue需要的数据和方法,包括:...例如 1 + 1,没有结果的表达式不允许使用,如:var a = 1 + 1; 可以直接获取Vue实例中定义的数据或函数 示例: Vue对class属性进行了特殊处理,可以接收数组或对象格式 对象语法:可以传给 :class 一个对象,以动态地切换 class: <div :class="{ red: true,blue:false...bool} red和blue两个样式的值分别是bool和!bool,也就是说这两个样式的生效标记恰好相反,一个生效,另一个失效。...通俗的来说:过滤器是对即将显示的数据做进一步的筛选处理,然后进行显示,值得注意的是过滤器并没有改变原来的数据,只是在原数据的基础上产生新的数据。

    12.4K20

    理解vue中的scope的使用

    我们都知道vue slot插槽可以传递任何属性或html元素,但是在调用组件的页面中我们可以使用 template scope="props"来获取插槽上的属性值,获取到的值是一个对象。...注意:scope="它可以取任意字符串"; 上面已经说了 scope获取到的是一个对象,是什么意思呢?我们先来看一个简单的demo就可以明白了~ 如下模板页面: 一个组件,然后给 tb-list 传递了一个data属性值;该值是一个数组,如下值: data: [ { name: 'kongzhi1', age: '29...$index}} 最后在模板上使用scope来接收slot中的属性;因此scope的值是如下一个对象: {"row":{"name":"kongzhi1...:"woman"},"$index":1} 从上面返回的scope属性值我们可以看到,scope返回的值是slot标签上返回的所有属性值,并且是一个对象的形式保存起来,该slot有两个属性,一个是row

    1.5K41

    滴滴前端常考vue面试题_2023-02-28

    uname=' + jsmes) 3)获取参数 通过$route.query 获取传递的值 Class 与 Style 如何动态绑定 Class 可以通过对象语法和数组语法进行动态绑定 对象语法: 值的响应式问题 ref返回的响应式数据在JS中使用需要加上.value才能访问其值,在视图中使用会自动脱ref,不需要.value;ref可以接收对象或数组等非原始值,但内部依然是reactive...}); }); 简单来说就是,重写了数组中的那些原生方法,首先获取到这个数组的ob,也就是它的Observer对象,如果有新的值,就调用observeArray继续对新的值观察变化(也就是通过target...extends 主要是为了便于扩展单文件组件,接收一个对象或构造函数。...Vue 2.x 里,是通过 递归 + 遍历 data 对象来实现对数据的监控的,如果属性值也是对象那么需要深度遍历,显然如果能劫持一个完整的对象是才是更好的选择。

    84730

    一个合格的初级前端工程师需要掌握的模块笔记

    浮动元素依然按照其在普通流的位置上出现,然后尽可能的根据设置的浮动方向向左或者向右浮动,直到浮动元素的外边缘遇到包含框或者另一个浮动元素为止,且允许文本和内联元素环绕它。...对象(Object) js中内置了如下的对象: Object 是所有JS对象的超类(基类),JS中的所有对象都是继承自Object对象的 Array 数组对象 定义数组属性和方法 Number...indexOf 数组可以通过indexOf()来搜索一个指定的元素的位置,如未找到返回 -1 concat concat()方法把当前的 数组 和 另一个 数组连接起来,并返回一个新的 数组 var newArr...把所有匹配的元素追加到另一个指定的元素集合中 prepend() 向每个匹配的元素内部前置内容 prependTo() 把所有匹配的元素前置到另一个、指定的元素集合中 外部插入 after() 在每个匹配的元素之后插入内容...before() 在每个匹配的元素之前插入内容 insertAfter() 把所有匹配的元素插入到另一个、指定的元素集合的后面 insertBefore() 把所有匹配的元素插入到另一个、指定的元素集合的前面

    3.7K10

    理想汽车前端面试题详解,面试经验分享

    splice() - 通过删除或替换现有元素或添加新元素来修改数组的内容。 fill() - 用一个固定值填充数组中从起始索引到终止索引内的全部元素。...copyWithin() - 将数组内部的一部分浅复制到同一数组的另一个位置。 四、深拷贝深拷贝:将对象完全复制一份,新对象和原对象是两个独立的对象,修改一个对象的属性不会影响另一个对象的属性。...更好的响应式系统:Vue.js 3.0对响应式系统进行了重写,使用了Proxy代理对象来实现数据变化的监听和依赖追踪。...这些改进使得Vue.js 3.0相对于2.0在性能方面有显著的提升。 体积优化:Vue.js 3.0采用了模块化的设计,可以实现按需引入,只加载需要的部分,从而减小应用的体积。...TypeScript支持:Vue.js 3.0对TypeScript提供了更好的支持,包括提供了更好的类型推断、增强的类型检查等功能,使得在使用TypeScript开发Vue.js应用更加方便和安全。

    10100

    :第二章 - 常见的指令的使用

    Vue的过程中,当我们引入了 vue.js 这个文件之后,浏览器的内存中就存在了一个 vue 对象,此时,我们就可以通过构造函数的方式创建出一个 vue 的对象实例,后面就可以对这个实例进行操作。   ...这里可以使用 window.vm 获取到 vue 实例,则是因为我们之前引入 vue.js 后,会自动在浏览器内存中创建 vue 对象,我们通过构造函数创建的 vue 的实例也就存在与浏览器的内存里了。...在下面的代码中,我们通过绑定一个按钮的点击事件,去修改 flag 值,从而做到对于两个 h3 标签的显示与否的控制。...我们可以看到,flag 的初始值为 true,此时,两个 h3 标签都可以显示出来,当我们点击切换按钮后,两个 h3 都隐藏了,不同的是,我们可以看到,对于使用 v-if 指令控制的 h3 标签,当表达式为...在使用 v-for 指令时,我们可以对数组、对象、数字、字符串进行循环,获取到源数据的每一个值。

    1.2K10

    2021前端高级面试题_2021前端面试题目100及最佳答案

    4、简述computed和watch的使用场景 computed: 不支持缓存,数据变,直接会触发相应的操作; watch支持异步; 监听的函数接收两个参数,第一个参数是最新的值;第二个参数是输入之前的值...怎么获取传过来的值?) 6、$route 和 $router 的区别 8、vue-router 有哪几种导航钩子?..., el还没有,也没有挂载dom beforeMount: 在这里vue实例的元素el和数据对象都有了,只不过在挂载之前还是虚拟的dom节点 mounted: vue实例已经挂在到真实的dom上,可以通过对...,bind不会自动执行,需要手动调用 call、bind与apply区别:前两个都有无数个参数,apply只有两个参数,而且第二个参数为数组 16,vue路由的两种模式 1.hash模式 特点:在url...,需要进行状态提升,即将状态提升到他们最近的 祖先组件中,触发父组件的状态变更,从而影响另一个组件的显示。

    81420

    前端之Vue.js库的使用

    数据与方法 当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其data对象中能找到的所有的属性。当这些属性的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。...,从而做相应的操作,侦听属性是一个对象,它的键是要监听的对象或者变量,值一般是函数,当你侦听的元素发生变化时,需要执行的函数,这个函数有两个形参,第一个是当前值,第二个是变化后的值。...属性或者sytle属性,它们的属性值可以是表达式,vue.js在这一块做了增强,表达式结果除了是字符串之外,还可以是对象或者数组。...v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上:   条件渲染...跨域请求 vue的自动化工具提供了开发的服务器,我们在这个服务器环境下开发,改动代码可以马上更新显示,错误了还有代码提示,非常方便,但是,如果我们组件中需要数据,而且数据在另一个服务器环境下运行,我们就需要跨域请求数据

    5.2K30
    领券