<div id="app">
  <input type="text" v-model="inputText">
<pre><code> &lt;ul&gt;
</code></pre>
  <li v-for="item in results">{{item}}</li>
<pre><code> &lt;/ul&gt;
</code></pre>
 </div>
<script>

   new Vue({

       el:'#app',

       data:{

         inputText:"",

         message:[

            "冬季奥运会项目有哪些",

            "冬季奥运会项目获得金牌数",

             "今天天气刮风"

                ],

            },

          computed:{

            results:function(){

             var searchResult=this.message;

               if(this.inputText==""){

                      return searchResult;

                }

        var searchStr=this.inputText.toLowerCase().trim();//输入框数据转为小写,写去除空格

          searchResult=searchResult.filter(function(ele){

              if(ele.toLowerCase().indexOf(searchStr)!=-1){

                        return ele;

                       }

                    })

                       return searchResult;      

                }    

            }

        })

        </script
编写程序实现如上图所示效果当在搜索框中输入相应内容自动在下述的列表中列出含有输入内容的信息如输入冬季则前三条记录显示。补全代码。div id=app input type=text v-model=__1___ ul li v-for=item in ___2__itemli ul divscript new Vue el#app data

原文地址: https://www.cveoy.top/t/topic/efx9 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录