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事件不就好了么?按你的表达? 涉及计算属性什么事?