Vue实例的computed属性
作用
将一个方法函数作为data值一样引用
在 computed中，可以定义一些属性，这些属性，叫做【计算属性】，计算属性的，本质，就是一个方法，只不过，我们在使用这些计算属性的时候，是把它们的名称，直接当作属性来使用的;并不会把计算属性，当作方法去调用;
使用注意事项
- 计算属性，在引用的时候，一定不要加（去调用，直接把它当作普通属性去使用就好
- 只要计算属性，这个function内部，所用到的任何data中的数据发送了变化，就会立即重新计算这个计算属性的值。任何数据，都没有发生过变化，则，不会重新对计算属性求值;
- 计算属性的求值结果，会被缓存起来，方便下次直接使用;如果~计算属性方法中，所以来的
语法
<body>
<div id="app">
<label>请输入任意信息：</label>
<input type="text" name="" id="" v-model="param01" />
<br />
<label>结果信息：</label>
<!-- 将一个方法作为一个data来使用 ，我们并没有在data属性里面定义result1-->
<input type="text" name="" id="" v-bind:value="result" />
</div>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
param01:''
},
methods:{
},
computed:{
// computed属性里面的方法，会监听方法里面引用的data们有没有改变，如果有改变，就会触发这个方法
'result':function(){
return this.param01
}
}
})
</script>
</body>
案例（搜索引擎（数组））
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Vue Template</title>
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/>
<script src="../js/Vue/Vue2.6.11.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app" class="container">
<div class="row"style="margin-top: 15px;">
<div class="col-md-6 col-md-offset-3">
<input type="text" name="" class="form-control" v-model="msg" />
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ul class="list-group">
<li v-for="item in result" class="list-group-item">{
{item}}</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
msg:'',
list:[
'asdafaffasdasd',
'sd123454664',
'wscggthtysdfe',
'rvbhtsyynu'
]
},
methods:{
},
computed:{
'result':function(){
// 搜索框里面没有字符默认显示全部，或者全都不显示
if(this.msg.trim()=='')
{
return this.list
}else{
// 和数组里面每一个匹配有就装到数组中再返回
var result=new Array()
for(var i=0;i<this.list.length;i++){
if((this.list[i].indexOf(this.msg))!=-1){
result.unshift(this.list[i])
}
}
return result
}
}
}
})
</script>
</body>
</html>
效果
