第九篇 函数表达式 - 模糊查询

         在上一篇中讲到 这个模糊查询的步骤，在 input 框中监听数据框中value的值变化进行evt.taget.value来获取到数据，那么在 第三篇讲到 v-molde 数据的双向绑定，那么可以通过数据的双向绑定来进行获取，这一篇要讲的利用函数表达式来完成模糊查询。首先简单了解一下函数表达式：

函数表达式

将声明的函数表达式赋值给一个变量，通过变量完成函数的调用和参数的传递，举例：

<script type="text/javascript">
    var fn = function sum(a,b){
        return a + b 
    }
    fn(1,2);   // 输出：3 
</script>

以上就是简单的对函数表达式的理解，不懂可以继续了解；

---

{{ }} 插值表达式

        Vue当中我们知道显示是用这个Mustache语法，" {{ }} "，也称插值表达式，可以写任何合法的js表达式，下面进行演示一下：

<div id="app">
	<!-- 简:hello vue -->
	<p>{{mytext}}</p>
	<!-- 计算:3 -->
	<p>{{1+2}}</p> 
	<!-- 三元运算:false -->
	<p>{{3==2?'true':'false'}}</p>
	<!-- 函数:输出一个函数 -->
	<p>{{handleClick}}</p>
	...
</div>

<script>
    var vm = new Vue({
        el:'#app',
            data:{
                mytext:'hello vue'
            },
            methods:{
                handleClick(){
					console.log('点击')
			}
        }
    })
</script>

---

即学即用

         通过代码演示知道在插值表达式中写上函数名为输出函数function() { native code }，那么使这函数得以运行起来。

<div id="app">
	<p>{{handleClick}}</p>
	<p>{{handleClick()}}</p>
</div>

<script>
	new Vue({
		el:'#app',
		methods:{
			handleClick(){
				console.log('点击')
			}
		}
	})
</script>

可以看到 {{handleClick()}} 执行了函数在控制台输出：点击，那么要使用函数表达式呢，需要注意的是将 hangleCLick -> handleClick() 这样,同时在对应的函数体里面写上需要返回内容( return ) 

 函数表达式 - 模糊查询

         与 上一篇 filter过滤 - 模糊查询 实现的效果一样，但不用@input监听value值的变化而是用到v-model 数据双向绑定完成；

基本思路：使用v-model获取到用户输入的内容，在将获取到的在数组中进行一个过滤操作，找出数组当中是否有包含的内容，接着利用函数表达式特性，在函数体中return出去我们进行对数组过滤筛选的值， 再通过v-for将结果展示即可！

• 进行双向绑定
• 每次改变value值的时候，状态会跟着改变，状态改变所有依赖它的函数也将重新计算
• 本意不是为了去监听，而是恰巧函数表达式会依赖此状态的函数重新执行

<div id="app">
	<input type="text" v-model="mytext" />
	<ul>
		<li v-for="item in mymethod()">{{item}}</li>
	</ul>
</div>

<script>
	new Vue({
		el:'#app',
		data:{
				mytext:'',
				list:['alin','dsad','weqq','nbcf','dasd','asds']
			},
		methods:{
			mymethod(){
				return this.list.filter(item=>item.includes(this.mytext))
			}
		}
	})
</script>

         这一篇的内容就到这里，简单介绍和使用函数表达式，以及在Vue中 {{}} 使用函数表达式所能达到怎样效果，以及在之前的基础上实现利用函数表达式来实现模糊查询。