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>
效果