Click to expand Vue achieve / hide function

Vue Expand Collapse functions to achieve

Before writing project when referred to a demand Expand / Collapse needs of all content. Before because a value is reconstructed, write your own functions is still relatively small, so the Internet search, I found a lot of things actually, although jq functions can take over with, but still want to use to write authentic vue module

  demo: 
<div :class="is_show ? 'new_detail' : 'work_detail'">
      <!-- 这里是操作的div 包含的文字 -->
      <!-- 这里的is——show 就是true/false -->
             <!-- // 先通过绑定class 来判断 是显示所有内容的样式 还是隐藏部分样式 -->
       </div>
        <span class="open" @click="is_show=!is_show">
        {{word}}
        <!-- 点击事件控制 class绑定所依赖的判断条件 -->
        <!-- 此时的word就是计算属性的结果 -->
        </span>
<!-- 计算属性 -->

computed: {
    // 项目内容
    word() {
      if (this.is_show === false) {
        return '展开'
      } else if (this.is_show === true) {
        return '收起'
      } else if (this.is_show === '') {
        return null
      }
    },

Overall, this is a pseudo code but the implementation is already very high degree of compliance with the basic realization of the idea of ​​vue

Seeking thumbs up