vue 根据变量值显示内容

Question

问题描述

vue 根据变量值显示内容，如变量=a，则显示“米面粮油”，变量=b，则显示蔬菜，如果用v-if太繁琐，请问大家有啥好办法

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
<div class="ite" v-for="(it,inde) of newchild" :key="inde">

        <div v-if="it.name == 'a'">米面粮油</div>
        <div v-if="it.name == 's'">蔬菜</div>

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

<div v-text="showContent"></div>
data () {
    return {
        listArr: [
            { name: 'a', value: '米面粮油' },
            { name: 's', value: '蔬菜' }
        ],
        showContent: ''
    }
}

mounted () {
    let a = 'a'; //  你的变量
    this.listArr.forEach((item) => {
      if (item.name === a) {
        this.showContent= item.value
      } 
    })
}

Answer 2

<template>
  <div class="ite" v-for="(it,inde) of newchild" :key="inde">
    <div>{{obj[it.name]}}</div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        obj: {
          a: '米面粮油',
          b: '蔬菜'
        }
      }
    }
  }
</script>