Vue 动态变量名

Glowworms浠

已于 2022-08-25 14:09:10 修改

阅读量2.6k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js

于 2022-08-25 14:06:58 首次发布

本文链接：https://blog.csdn.net/weixin_45533739/article/details/126522770

本文介绍如何在Vue中通过两种方法动态展示包含特定关键字的多个变量。一种方法是使用$data属性直接访问变量，另一种方法则是通过对象的方式进行处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

场景：
vue在页面里面要打印highsourcevalue / brandvalue / colorvalue / pricevalue，
每个变量里面都有value这个单词，所以我把value拿出来，动态展示。
有两种方法：

data:{
	typelist:[
		{id:'highsource',name:'优质车源'},
		{id:'brand',name:'品牌'},
		{id:'color',name:'车身颜色'},
		{id:'price',name:'价格'}
	],
	
	highsourcevalue:'1',//优质车源
    brandvalue:'2',//品牌
    colorvalue:'3',//车身颜色值
    pricevalue:'4',//价格显示
    value: {
        highsource: 'a',
        brand: 'b',
        color: 'c',
        price: 'd',
      }
	},

<ul id="box">
    <li class="classli align-center" tapmode @click.stop="chooseleft(index)" v-for="(vo,index) in typelist" :key="index" :class="{active:navindex==index}">
        <div class="dota radius-50" :class="{'bg-ff3131':$data[`${vo.id}value`]!=''}"></div>
        <div>{{vo.name}}--{{$data[`${vo.id}value`]}}--{{value[vo.id]}}</div>
    </li>
</ul>