vue 怎么去判断渲染

北仑小赤佬
  • 7

图片描述

图片描述

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

回复
阅读 5.6k
5 个回答

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

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

补充一下,在这里你可以使用计算属性,或者自定义方法,或者直接在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>
宣传栏