小程序-点击事件与数据绑定取随机值-色块变色和随机数

最新推荐文章于 2024-05-21 09:22:32 发布

耶斯莫鱼拉

最新推荐文章于 2024-05-21 09:22:32 发布

阅读量396

点赞数

分类专栏：微信小程序 uni-app JS 文章标签：小程序

本文链接：https://blog.csdn.net/weixin_59533746/article/details/132829992

版权

微信小程序同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

uni-app

2 篇文章 0 订阅

订阅专栏

一、用微信小程序原生的写法

<view class="box" style="background:{{bgcolor}}" bind:tap="changecolor">
	{{num}}
</view>

Page({

  /**
   * 页面的初始数据
   */
  data: {
    num:0,
    bgcolor: "#00c"
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.changecolor(),      

  },
changecolor() {
        let num =parseInt(Math.random() * 100);
        let r = parseInt(Math.random() * 255);
        let g = parseInt(Math.random() * 255);
        let b = parseInt(Math.random() * 255);
        let color = ` rgb(${r},${g},${b})`;
        console.log(color);
        console.log(num);
        this.setData({
         bgcolor:color,
         num:num
})
},
 
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

      }

.box {
    width: 100rpx;
    height: 100rpx;
    color: #fff;
    text-align: center;
    line-height: 100rpx;
  }

二、uniapp 用vue的写法

<<template>
  <view>
   <view class="box" v-bind:style="{background:bgcolor}" v-on:click="changecolor">
      {{num}}
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        bgcolor: "#00c",
        num: 1,    
          }
    },
    methods: {      
      changecolor() {
        let num =parseInt(Math.random() * 100);
        let r = parseInt(Math.random() * 255);
        let g = parseInt(Math.random() * 255);
        let b = parseInt(Math.random() * 255);
        let color = ` rgb(${r},${g},${b})`;
        console.log(color);
        console.log(num);
        this.bgcolor = color;
        this.num=num
      }
    }
  }
</script>

<style lang="scss">
  .box {
    width: 100rpx;
    height: 100rpx;
    color: #fff;
    text-align: center;
    line-height: 100rpx;
  }
 
</style>