Vueインスタンスの計算されたプロパティ
効果
メソッド関数をデータ値として参照する
計算では、いくつかの属性を定義できます。これらの属性は[計算属性]と呼ばれます。計算属性の本質はメソッドですが、これらの計算属性を使用する場合、それらの名前を属性として直接使用します。使用するには、計算を呼び出さないでください。メソッドとしてのプロパティ。
使用上の注意
- 計算された属性は、参照するときに追加してはなりません（呼び出すには、通常の属性として使用するだけです）。
- 計算された属性、この関数で使用されるデータのデータが変更されている限り、計算された属性の値はすぐに再計算されます。データが変更されていない場合、計算された属性は再評価されません。
- 計算された属性の評価結果は、次回直接使用するためにキャッシュされます。計算された属性メソッドの場合は、
文法
<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>
効果
