Vue计算属性判断显示隐藏

• 博主在写练习项目时，遇到了条件显示隐藏问题，楼主需要根据条件判断一个输入框里是否有文字来判断×号是或否显示隐藏。

        <input
          type="text"
          id="input_search"
          class="search_input"
          :placeholder="searchVal"
          v-focus
          ref="input_search"
          @input="searchForm"
          v-model.trim="searchFormVal"
        >

<!-- 绑定计算属性:data-watch='isDelIcon' 为了让计算属性进行响应-->
<div v-show="isShowIcon" @click="delSearchFormVal" :data-watch="_delIcon">
    <icon name="search_input_del" class="icon_style"></icon>
</div>

  data() {
    return {
      //搜索热词
      searchVal: "星选好店满减30",
      //搜索条件
      searchFormVal: "",
      //搜索条件列表是否显示
      isSeaSHow: false,
      //搜索条件列表是否显示
      isHotShow: false,
      //历史搜索与热门搜索列表是否显示
      isHistory: false,
      //历史搜索显示隐藏
      isShowHistory: true,
      //搜索条件删除按钮显示隐藏
      isShowIcon: false,
    };
  },

computed: {
    // 判断input是否有焦点
    _iptFoucus() {},
    //是否显示搜索条件删除按钮
    _delIcon() {
      this.isShowIcon = this.searchFormVal.length > 0;
    },
    //是否显示历史删除按钮
    _delHistory() {
      this.isShowHistory = this.historyAry.length > 0;
    }
  },

• 为了让计算属性进行响应，楼主给加了一个自定义属性绑定计算属性，这样在input输入文字或者删除时，计算属性就可以响应到了，从而完成显示隐藏问题。