How to select and change styles in Uniapp

With the continuous development of the mobile Internet, the gap between native applications and web applications has gradually narrowed. A cross-platform development framework called Uniapp has emerged and has become the tool of choice for many developers. In Uniapp, similar to CSS style sheets in web development, we can use styles to modify the UI effects of components; during the development process, we usually encounter situations where we need to change the style of a component based on its selected state. This article We will introduce how to use Uniapp to change the selected style.

1. Use v-bind to bind styles

In Uniapp, we can use v-bind to bind certain attributes of the component, such as class, style, etc., so that when it is bound When the value of a certain variable changes, the style of the component will also change accordingly. Therefore, we can dynamically change the bound attribute values ​​​​according to the selected state of the component, thereby achieving the effect of selecting and changing the style.

<template>
  <view 
    :class="{selected: isSelected}"
    @tap="toggleSelect"
  >
    我是一个组件
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      isSelected: false
    }
  },
  methods: {
    toggleSelect() {
      this.isSelected = !this.isSelected
    }
  }
}
</script>
 
<style>
.selected {
  background-color: #00BFFF;
  color: #fff;
}
</style>

In the above code, we use v-bind:class to bind the class attribute of the view component and bind it to an isSelected variable. When isSelected is true, the component's class attribute value will change to "selected", causing the component's style to change. When isSelected is false, it will return to its original state.

At the same time, we also bound a tap event to the view component. When the user clicks on the component, the toggleSelect method will be triggered. This method will invert the isSelected value, thereby realizing the selection and deselection operations.

2. Use the computed attribute

In addition to using v-bind to bind styles, we can also use the computed attribute provided by Uniapp to dynamically calculate the style of the component and achieve the effect of selecting and changing the style. . The computed attribute is usually used to dynamically generate some data in the page, but we can also use it for calculated styles.

<template>
  <view 
    :style="boxStyle"
    @tap="toggleSelect"
  >
    我是一个组件
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      isSelected: false
    }
  },
  computed: {
    boxStyle() {
      if (this.isSelected) {
        return {
          backgroundColor: '#00BFFF',
          color: '#fff'
        }
      } else {
        return {
          backgroundColor: '#fff',
          color: '#000'
        }
      }
    }
  },
  methods: {
    toggleSelect() {
      this.isSelected = !this.isSelected
    }
  }
}
</script>

In the above code, we use the computed attribute to calculate the style of the view component. When isSelected is true, the boxStyle method in the computed attribute will return an object containing the selected style; when isSelected is false, it will return an object containing the original style. In this way, we can dynamically calculate the style of the component in the calculated property and achieve the effect of changing the style when selected.

Conclusion

This article mainly introduces the method of using v-bind and computed attributes to select and change the style in Uniapp. Through these two methods, we can flexibly choose the appropriate method according to specific needs, so as to quickly achieve the purpose of selecting and changing styles.

The above is the detailed content of How to select and change styles in Uniapp. For more information, please follow other related articles on the PHP Chinese website!