vue hidden state

As front-end development becomes increasingly mature and complex, there are more and more problems that we developers need to adapt to and solve. Among them, the optimization of page display logic is an aspect that we have to pay attention to. In order to optimize page rendering efficiency and interactive experience, Vue provides a very convenient function: hidden state.

What is hidden state?

First of all, let’s take a brief look at what Vue’s hidden state is. It actually hides or displays the content of a component by controlling the display attribute of the Dom element. For example, if we need to hide a certain area under certain conditions, we can write like this:

<template>
  <div>
    <div class="info" v-show="isShow">
      <!-- 这里是一些信息内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: true // 控制显示或隐藏
    }
  }
}
</script>

In the above code, we used the Vue instruction "v-show" and bound it to a variable isShow on. When the value of isShow is true, the area content will be displayed; when the value of isShow is false, the area content will be hidden.

The difference between v-if

We mentioned earlier that the Dom element in v-show is hidden or displayed by modifying the display attribute. So what is the difference between v-if and v-show?

First of all, v-if will be executed when the component needs to be rendered, while v-show simply modifies the display attribute and will be executed regardless of whether the component needs to be rendered. Therefore, when components frequently need to switch displays, using v-show to optimize performance is higher.

Secondly, the expressions of v-if and v-show are written slightly differently. v-if is followed by an expression, and the component will be rendered only when the expression is true; v-show is followed by a Boolean value. When it is true, the component is displayed, and when it is false, the component is hidden.

In addition, v-if completely deletes the component from the Dom tree, and v-show sets the display attribute of the component to none. Therefore, v-if may cause performance problems with Dom redrawing when switching frequently.

It should be noted that v-if and v-show are not recommended to be used at the same time, but one of them should be selected based on actual needs.

Application scenarios

Vue hidden state can be applied to many scenarios. The following are some common application scenarios.

1. Login status control

When the user is not logged in, we need to hide some content that only logged in users can see. At this time, you can use Vue hidden state to implement it simply:

<template>
  <div>
    <div v-show="isLogin">
      <!-- 需要登录后才能查看的内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLogin: false // 默认未登录
    }
  },
  created() {
    // 模拟登录，修改isLogin值
    this.isLogin = true;
  }
}
</script>

2. Table data display control

When the table data is very large, we don’t want to display all the data at once , but needs to be displayed in pages. At this time, you can use Vue's hidden state to achieve paging display:

<template>
  <div>
    <div v-for="(item, index) in data" :key="index" v-show="(index+1) > (currentPage-1)*pageSize && (index+1) <= currentPage*pageSize">
      <!-- 表格展示内容 -->
    </div>
    <div>
      <!-- 分页组件 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [], // 表格数据
      currentPage: 1, // 当前页码
      pageSize: 10 // 每页显示数量
    }
  },
  created() {
    // 获取表格数据，赋值给data
  }
}
</script>

When there is a lot of table data, we only need to display the data of the current page and hide other data.

Summary

In front-end development, optimizing page rendering efficiency and interactive experience is an aspect that we have to pay attention to. Vue hidden state provides a simple and easy-to-use method that can quickly display and hide page content. We should choose a suitable hidden state method based on actual needs and combine the characteristics of v-if and v-show to optimize page rendering efficiency and user experience.

The above is the detailed content of vue hidden state. For more information, please follow other related articles on the PHP Chinese website!