本文共 2934 字，大约阅读时间需要 9 分钟。

一、需求问题：在开发当中，我们可能会遇到这样的需求，当在搜索输入框输入查询的关键字后，后面能够动态的进行查询，并且显示出来

二、需求分析：既然需要使用输入框查询，那么需要通过v-model进行双向数据绑定，而在输入关键字后，能够动态的显示查询出来的数据，需要使用watch监听。当在数据发生变化后，能够立马进行监听到，然后进行相应的监听回调，动态查询数据并显示。

三、需求实现：

<template>    <div class="search_body">        <div class="search_input">            <div class="search_input_wrapper">                <i class="iconfont icon-sousuo"></i>                <input type="text" v-model="message">            </div>					        </div>        <div class="search_result">            <h3>电影/电视剧/综艺</h3>            <ul>                <li v-for="item in movieList" :key="item.id">                     <div class="img"><img :src="item.img | setWH('128.180')"></div>                    <div class="info">                        <p><span>{   {    item.nm }}</span><span>{   {    item.sc }}</span></p>                        <p>{   {    item.enm }}</p>                        <p>{   {    item.cat }}</p>                        <p>{   {    item.rt }}</p>                    </div>                </li>            </ul>        </div>	</div></template>    <script>export default {       name: 'Search',    data() {           return {               message: '',            movieList: []        }    },    watch: {           message(newVal) {               // console.log(newVal);            this.axios.get('/api/searchList?cityId=10&kw='+newVal).then((res) => {                   var msg = res.data.msg;                var movies = res.data.data.movies;                if( msg && movies ){                       this.movieList = res.data.data.movies.list;                }            })        }    }}</script><style scoped>#content .search_body{    flex:1; overflow:auto;}.search_body .search_input{    padding: 8px 10px; background-color: #f5f5f5; border-bottom: 1px solid #e5e5e5;}.search_body .search_input_wrapper{    padding: 0 10px; border: 1px solid #e6e6e6; border-radius: 5px; background-color: #fff; display: flex; line-height: 20px;}.search_body .search_input_wrapper i{   font-size: 16px; padding: 4px 0;}.search_body .search_input_wrapper input{    border: none; font-size: 13px; color: #333; padding: 4px 0; outline: none; margin-left: 5px; width:100%;}.search_body .search_result h3{    font-size: 15px; color: #999; padding: 9px 15px; border-bottom: 1px solid #e6e6e6;}.search_body .search_result li{    border-bottom:1px #c9c9c9 dashed; padding: 10px 15px; box-sizing:border-box; display: flex;}.search_body .search_result .img{    width: 60px; float:left; }.search_body .search_result .img img{    width: 100%; }.search_body .search_result .info{    float:left; margin-left: 15px; flex:1;}.search_body .search_result .info p{    height: 22px; display: flex; line-height: 22px; font-size: 12px;}.search_body .search_result .info p:nth-of-type(1) span:nth-of-type(1){    font-size: 18px; flex:1; }.search_body .search_result .info p:nth-of-type(1) span:nth-of-type(2){    font-size: 16px; color:#fc7103;}</style>