Vue查找含有关键字的数据

<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPl

霸道流氓气质

5102人浏览 · 2018-09-16 22:44:04

霸道流氓气质 · 2018-09-16 22:44:04 发布

<!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的书目。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^