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-if 试试

Answer 2

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