vue中如何控制input的对应内容的显示隐藏

Question

在mount时，为什么会调用三次arr2的方法，我怎么在input的值改变的时候才显示下方input的对应内容，现在一直显示，我无法在arr2中控制其显示隐藏

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div id="itany">
    <ul class="form-ul">
        <li class="form-item">
            <h4 class="form-title">邮件主题</h4>
            <input type="text" v-model="name" class="form-input">
            <i class="icon pen"></i>
        </li>
    </ul>
    <p v-for="(v,k) in arr2" :key="k" v-show="flag">
        {{v}}
    </p>
</div>
<!--循环绑定-->
<script>
    //export default{
    //   create(){
    //       this.request();
    //   },
    //   methods:{
    //    request(){  
    //    }
    //}
    //}
    //import axios from './axios' 
    //Vue.prototype.$http = axios

    var vm = new Vue({
        el:'#itany',
        data:{
            flag:false,
            arr:['华','alex','mark'],
            name:''
        },
        //钩子函数，初始化完
        created: function(){


       },
        
        computed:{
            arr2:function () {
                var temp=[];
                //console.log(this.flag);
                
                this.arr.forEach(val=> {
                    if(val.includes(this.name)){
                    this.flag=true;
                    temp.push(val);
                console.log(this);
            }
        });
        console.log(temp);
        return temp;
    }
    }
    })

</script>

Answer 1

你们都没有明白人家的想法。
他是想做一个模糊查询。
首先你先把那个v-show去掉。 因为没用。
v-for 一个空数组。当然什么都没有。
判断错误。
'经理'.includes('') //true
你再加上一个this.name != ''
完美结果。
<input v-model="str" />
<div v-for="(item,index) in list2" :key="index">

{{item}}

</div>
computed:{

  list2:function(){
        let arr = [];
        let that = this;
        this.list.map((item,index)=>{
            if(item.includes(that.str) && that.str !=''){
                console.log(item)
                arr.push(item)
            }
        })
        return arr;
  }

}

Answer 2

<div id="itany">
    <ul class="form-ul">
      <li class="form-item">
        <h4 class="form-title">邮件主题</h4>
        <input type="text" v-model="name" class="form-input" @input="changeName">
        <i class="icon pen"></i>
      </li>
    </ul>
    <p v-for="(v,k) in arr2" :key="k">{{v}}</p>
  </div>

data () {
      return {
        flag: false,
        arr: ['华', 'alex', 'mark'],
        arr2: [],
        name: ''
      };
    },
    
    methods: {
      changeName () {
        this.arr2 = [];
        if (this.name) {
          this.arr.forEach(val => {
            if (val.includes(this.name)) {
              this.flag = true;
              this.arr2.push(val);
            }
          });
        }
      }
    }

Answer 3

把v-show 改成v-if 试试

Answer 4

@change事件不就好了么?按你的表达? 涉及计算属性什么事?

Answer 5

computed方法里操作显示隐藏是不对的，要在input多添加个监听即可，初始显示为false，只有在v-model的name值不为空时，置为true

    methods:{
        showList:function(){
            if(this.name!=""){
                this.flag=true;
            }else{
                this.flag=false;
            } 
        }
    }