vue 怎么去判断渲染

• Z时代
• 2024-01-10
• 分类：技术分享

从后台获取的sex显示1 怎么去判断渲染出性别是男

回答：

楼上回答用计算属性等。都能解决问题。我再提供一种方案。可供参考。

<template>
<p>{{sexArr[userInfo.sex]}}</p>
<p>{{sexObj[userInfo.sex]}}</p>
</template>
data: {
    userInfo:{
        sex: 1
    },
    // 数组
    sexArr: ['女','男','未知'],
    // 或者对象
    sexObj: {
        0:'女',
        1:'男',
        2:'未知'
    }
},

回答：

补充一下，在这里你可以使用计算属性，或者自定义方法，或者直接在Mustache插值时使用js三目表达式，具体情况要看需求：如果单个列表项就是是独立的组件，那可以使用计算属性来缓存结果，不必每次重复计算；如果是简单的把整个列表放在一个组件没有再细化，那需要使用方法来针对不同项渲染不同结果，至于三目表达式，因为这里只是简单的逻辑判断，所以也没问题
-----以下原答案-----

不认真看文档，计算属性不就是专门用来做这件事的吗？

var vm = new Vue({
  el: '#example',
  data: {
    sex: '1'
  },
  computed: {
    // 计算属性的 getter
    sexINfo: function () {
      // `this` 指向 vm 实例
      return this.sex === 1 '男': '女'
    }
  }
})

回答：

{{userInfo.sex == 1?'男':'女'}}

回答：

<p>{{userInfo.sex == 1 ? '男' : '女'}}</p>

以上是 vue 怎么去判断渲染 的全部内容， 来源链接： utcz.com/a/148918.html