The computed property of the Vue instance
effect
Reference a method function as a data value
In calculated, you can define some attributes. These attributes are called [computed attributes]. The essence of calculated attributes is a method, but when we use these calculated attributes, we use their names directly as attributes. To use; does not call calculated properties as methods;
Precautions for use
- Calculated attributes, when referencing, must not add (to call, just use it as a normal attribute
- As long as the calculated attribute, the data in any data used within this function is changed, the value of the calculated attribute will be recalculated immediately. If any data has not changed, then the calculated attribute will not be re-evaluated;
- The evaluation result of the calculated attribute will be cached for direct use next time; if it is in the calculated attribute method, so come
grammar
<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>
Case (search engine (array))
<!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>
effect
