vue-05-模糊搜索案例-复习

第一种：

 <div id="box">
    <input type="text" v-model="mytext">
    <ul>

      <!-- 第一种 -->
      <template v-for="item in datalist" :key="item">
        <li v-if="item.includes(mytext)">
          {{item}}
        </li>
      </template>

    </ul>
  </div>

<script>
    var obj = {
      data() {
        return {
          mytext: "",
          datalist: ["11", "22", "33", '123', '1123', '13131'],
        }
      },
      methods: {

      },
    }
    var app = Vue.createApp(obj).mount("#box")
  </script>

运行结果：

---

第二种：

  <div id="box">

    <!-- 第二种 在输入框绑定事件-->
    <input type="text" v-model="mytext" @input="handInput">
    <ul>
      <li v-for="item in datalist " :key="item">
        {{item}}
      </li>

    </ul>
  </div>

 <script>
    var obj = {
      data() {
        return {
          mytext: "",
          datalist: ["11", "22", "33", '123', '1123', '13131'],
        }
      },
      methods: {

        handInput() {
          // console.log(this.mytext);
          // filter 过滤 如果输入的值包含，则过滤掉 
          this.datalist = this.datalist.filter(item => item.includes(this.mytext))
        }

      },
    }
    var app = Vue.createApp(obj).mount("#box")
  </script>

运行结果：跟上面的一样，第二种可以说是一次过滤，因为重新赋值了给datalist,要是想再次使用的话，可以用一种笨的方法，浪费点空间，如下：

 data() {
        return {
          mytext: "",
          datalist: ["11", "22", "33", '123', '1123', '13131'],

          newlist: ["11", "22", "33", '123', '1123', '13131'],
        }
      },

 methods: {
        handInput() {
          
          this.datalist = this.newlist.filter(item => item.includes(this.mytext))
        }

---

对于第二种产生的问题，还可以用一种函数表达式的写法，可以说更妙

 <div id="box">
    <input type="text" v-model="mytext">
    <ul>

      <!-- 函数表达式 -->
      <li v-for="item in test() " :key="item">
        {{item}}
      </li>

    </ul>
  </div>

 methods: {
        //表达式写法 
        test() {
          return this.datalist.filter(item => item.includes(this.mytext))
        }
      },