根据数据的类型不同显示对应的文字与样式

小阳生煎

已于 2022-07-04 13:34:56 修改

阅读量985

点赞数

分类专栏： # Vue2 # 原生文章标签： javascript vue.js css

于 2021-04-14 14:14:21 首次发布

本文链接：https://blog.csdn.net/m0_53912016/article/details/115697525

版权

Vue2 同时被 2 个专栏收录

109 篇文章 4 订阅

订阅专栏

原生

54 篇文章 3 订阅

订阅专栏

根据数据的类型不同显示对应的文字

//在data写入
// <!-- 问答ask 分享share job招聘  good精华 -->
  typeMap: {
        ask: "问答",
        share: "分享",
        job: "招聘",
        good: "精华"
      },
   //渲染的时候
    {{typeMap[item.tab]}}//item.tab是对应的请求数据 (ask share 这些)

//首先把对应的文字颜色的样式写出来 然后在里面书写对应的判断这样子

//以上的 ask share job good 分别是写的样式
 <span   :class="[{'ask': item.tab === 'ask'},
 {'share': item.tab === 'share'},
 {'job': item.tab === 'job'},
 {'good': item.tab === 'good'}]" >
 {{typeMap[item.tab]}}</span>

数据的类型不同显示对应样式

vue根据数据不同显示不同样式(难系2)

在这里插入图片描述

循环根据数据不同显示不同样式

小程序根据数据不同显示不同样式

综上所述

在css中分别给不同的类设置不同的颜色

      <view>
          <view wx:if="{{item.price>0}}" class='record_price1'>{{item.price}}</view>
          <view wx:else class='record_price2'>{{item.price}}</view>
      </view>

循环语句判断

 wx:if  wx:elif  wx:else

vue当中根据对于不同文字对应的关键字显示对应的颜色

比如3级甲等 2级甲等 一级乙等 这段文字全部包含级这个字我要变成红色

公立医院 私立医院 民营医院 包含医院我变成白色展示

<span
     :style="activation(item.applicationSubName)">{{item.applicationSubName }}</span>

  computed: {
    activation() {
      return (value) => {
        if (value.indexOf("级") !== -1) {
          return { background: " #ebf8f5", color: "#3ebfa0" };
        } else if (value.indexOf("医院") !== -1) {
          return { color: "#55a2f0", background: " #e7f3ff" };
        }
      };
    },
  },