Vue查找含有关键字的数据

红太狼 2023-10-18 08:53 25阅读 0赞

<!doctype html>
    <html lang="en">
     <head>
      <meta charset="UTF-8">
      <meta name="Generator" content="EditPlus®">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <title>Vue找出含有关键字的数据</title>
     </head>
     <body>
     <div id="app">
      <ul>
       <template v-for="book in books">
        <li>书名：{
       {book.name}}</li>
        <li>作者：{
       {book.author}}</li>
       </template>
      </ul>
     </div>
    
    
    <script src=" href='https://cdn.jsdelivr.net/npm/vue/dist/vue.js">https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
    <script>
     var app = new Vue({
      el:'#app',
      data:{
       books:[
        {
         name:'《书本1》',
         author:'作者1'
        },
        {
         name:'《书本2》',
         author:'作者2'
        },
        {
         name:'《书本3》',
         author:'作者3'
        }
       ]
      },
      methods:{
       handleToggleClick:function(){
        this.type =this.type==='name'?'mail':'name'
       }
      }
     });
    
     app.books = app.books.filter(function(item){
      return item.name.match(/3/);
     });
    </script>
     </body>
    </html>

这样会找出含有关键字3的书目。

![70][]

![Image 1][]

[70]: https://img-blog.csdn.net/20180916224338493?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[Image 1]: