微信小程序点击按钮变字体颜色

Question

微信小程序开发：

实现一个按钮，和一段文字“Hello World”,点击时依次按照“红，绿，蓝，绿”的次序循环变换文字颜色。即：红，绿，蓝，绿，红，绿，蓝，绿

关键点：一个按钮
实现颜色变化
应用JS进行开发

Answer 1

wxml部分

<view class="container">
  <view class="usermotto">
    <text class="user-motto" style="color: {{color[index]}};">Hello World</text>
  </view>
  <button type="primary" bindtap="changeColor">变色</button>
</view>

js部分

Page({
  data: {
    color: ['red', 'green', 'blue','green'],
    index: 0
  },
  changeColor(){
    this.setData({
      index: (this.data.index + 1) % 4
    })
  },
})