7-vue语法 class与style绑定

[小案例]

先给盒子一个初始颜色，把初始颜色作为属性绑定到style，然后给盒子绑定一个点击方法，使得点击盒子就会自动变化颜色

这里不需要字母，只要数字就能显示十六进制色，是因为都是暗色，颜色比较暗的在十六进制里只有6位数字，没有字母，有字母的颜色都比较亮

<template>
  <view>
    <view class="box" :style="{background:bgcolor}" @click="clickBG">
      
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        bgcolor: "#c00"
      }
    },
    methods: {
      clickBG(){
        // 这个随机数是0-1之间的,所以从他小数后面的部分截取即几位做颜色值出来
        // 先把他转成字符串,然后从第三位（第4位才是截取的第一个值）开始截取,一共截取6位数
        // 前面的#号是16进制颜色的标志
        let color = "#"+String(Math.random()).substr(3,6)
        this.bgcolor = color
    }
  }
  }
</script>

<style lang="scss">
.box {
  width: 200rpx;
  height: 200rpx;
  background-color: hotpink;
}
</style>

点击盒子之后，就会随机变色，色值可以在微信开发者工具的appdata中看到

[绑定class的几种方法]

上面的css样式是写死的，下面是实现动态的切换css样式

实现的原理是先给标签一个默认属性，属性名是预先写好的样式，属性值是布尔值，通过绑定的点击事件更换样式，在点击事件中给属性值取反就可以实现效果，取反要加this，因为是给data中定义的属性state取反，不加this获取不到state会报错

<template>
  <view>
    <view class="block" :class="{myactive:state}" @click="clickBlock"></view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        state: false
      }
    },
    methods: {
      clickBlock(){
        this.state = !this.state
      }
  }
  }
</script>

<style lang="scss">
.block {
  width: 300rpx;
  height: 300rpx;
  background-color: skyblue;
}
.myactive {
  width: 400rpx;
  background: hotpink;
  border-radius: 20rpx;
}
</style>

效果如下：

[上面这个功能也能用三元表达式来实现,就不用写方法了，上面的方法是对象语法，在标签里写对象的形式实现]

<template>
  <view>
    <view class="block" :class="{myactive:state}" @click="clickBlock"></view>
    <!-- 使用三元表达式实现 -->
    <view class="block" :class="state ? 'myactive' : ''" @click="clickBlock"></view>
    
  </view>
</template>

<script>
  export default {
    data() {
      return {
        state: false
      }
    },
    methods: {
      clickBlock(){
        this.state = !this.state
      }
  }
  }
</script>

<style lang="scss">
.block {
  width: 300rpx;
  height: 300rpx;
  background-color: skyblue;
}
.myactive {
  width: 400rpx;
  background: hotpink;
  border-radius: 20rpx;
}
</style>

[第三种方法，数组语法]

就是把上面的对象的写法换成数组写在标签中，其他没变