vue中如何控制input的對(duì)應(yīng)內(nèi)容的顯示隱藏

在mount時(shí)，為什么會(huì)調(diào)用三次arr2的方法，我怎么在input的值改變的時(shí)候才顯示下方input的對(duì)應(yīng)內(nèi)容，現(xiàn)在一直顯示，我無(wú)法在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>
<!--循環(huán)綁定-->
<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:''
        },
        //鉤子函數(shù)，初始化完
        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>

回答

編輯回答

柒槿年

@change事件不就好了么?按你的表達(dá)? 涉及計(jì)算屬性什么事?

2017年12月25日 14:06

編輯回答

故林

把v-show 改成v-if 試試

2018年6月26日 04:20

編輯回答

糖豆豆

computed方法里操作顯示隱藏是不對(duì)的，要在input多添加個(gè)監(jiān)聽(tīng)即可，初始顯示為false，只有在v-model的name值不為空時(shí)，置為true

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

2017年8月15日 13:39

編輯回答

涼汐

你們都沒(méi)有明白人家的想法。
他是想做一個(gè)模糊查詢(xún)。
首先你先把那個(gè)v-show去掉。因?yàn)闆](méi)用。
v-for 一個(gè)空數(shù)組。當(dāng)然什么都沒(méi)有。
判斷錯(cuò)誤。
'經(jīng)理'.includes('') //true
你再加上一個(gè)this.name != ''
完美結(jié)果。
<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;
  }

}

2017年10月9日 11:59

編輯回答

夢(mèng)囈

<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);
            }
          });
        }
      }
    }

2018年5月7日 08:07