javascript抽奖页面将后台所传数据转汉字

文章参考

引入vue参考菜鸟教程

    <!-- 引入vue -->
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

代码

new Vue({
        el: '#app',
        data: {
          list: [
            {
              img: './images/prize/phone1.png',
              num: 1,
              text: 'Iphone 14 pro max'
            },
            {
              img: './images/prize/redPacket.png',
              num: 2,
              text: '现金红包8888'
            },
            {
              img: './images/prize/phone2.png',
              num: 3,
              text: 'Iphone 14'
            },
            {
              img: './images/prize/redPacket.png',
              num: 4,
              text: '现金红包3888'
            },
            {
              img: './images/prize/icon1.png',
              num: 5,
              text: 'Gucci BLoom香水礼盒'
            },
            {
              img: './images/prize/redPacket.png',
              num: 6,
              text: '现金红包1888'
            }
          ]
        },
        // dom创建后渲染前
        created() {
          // forEach遍历数组，调用funcChangeNumToCHN方法将后台数据修改为汉字
          this.list.forEach((item, index, array) => {
            item.num = this.funcChangeNumToCHN(item.num)
          })
        },
        methods: {
          // 千以内数字转汉字
          funcChangeNumToCHN(s_) {
            var _arrayCHNNum = [
              '〇',
              '一',
              '二',
              '三',
              '四',
              '五',
              '六',
              '七',
              '八',
              '九'
            ]
            var _arrayCHNBit = ['', '十', '百', '千']
            let _numArray = s_.toString().split('')
            if (_numArray.length === 2 && _numArray[0] === '1') {
              _numArray[0] = 'y'
            }
            for (let i = _numArray.length - 1; i >= 0; i--) {
              if (_numArray[i] === '0') {
                _numArray[i] = 'x'
              } else {
                break
              }
            }
            let _s = ''
            let _bLast0 = false
            for (let i = 0; i < _numArray.length; i++) {
              if (_numArray[i] === 'x') {
                continue
              }
              if (_numArray[i] === '0' && _bLast0) {
                _bLast0 = true
                continue
              }
              if (_numArray[i] !== 'y') {
                //delete 1 in ten
                _s += _arrayCHNNum[parseInt(_numArray[i])]
              }
              if (_numArray[i] === '0') {
                _bLast0 = true
                continue
              }
              _bLast0 = false

              _s += _arrayCHNBit[_numArray.length - i - 1]
            }
            console.log(_s)
            return _s
          }
        }
      })

<div id="app">
        <ul>
          <li v-for="(item, index) in list" :key="index">
            <img :src="item.img" alt="" />
            <span>{{ item.num }}等奖</span
            ><span class="text">{{ item.text }}</span>
          </li>
        </ul>
    </div>