Vueで計算された属性：複雑なロジックの場合は、計算された属性を使用することを選択します
<body>
<div id="app">
<!--计算属性引用时不用加（），把其当作一个属性-->
<h2>{
{totalPrice}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
var vm=new Vue({
el:'#app',
data:{
books:[
{
id:110,name:"unix",price:119},
{
id:111,name:"unix",price:105},
{
id:112,name:"unix",price:98},
{
id:113,name:"unix",price:87},
]
},
computed:{
totalPrice:function(){
//计算books的总价
let result = 0;
for(let i = 0;i<this.books.length;i++){
result +=this.books[i].price
}
return result;
}
}
})
</script>
</body>
合計を処理するより簡潔な方法：
let result =0;
for (let i in this.books){
result+=this.books[i].price;
}
return result;
let result =0;
//book直接为数组中的每一项
for (let book of this.books){
result+=book.price;
}
return result;
reduce（）：追加された配列要素の合計を計算します。
totalPrice:function(){
return this.books.reduce((sum,cur)=>{
return sum + cur.price
},0)
}
//在该方法中，cur依次为books中的每一项，而sum初始为0，开始与cur累加
文字列のスプライシングを実現するための属性を計算します。
<div id="app">
<h2>{
{fullName}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
var vm=new Vue({
el:'#app',
data:{
message:'你好',firstName:'Lebron',lastName:'James'},
computed:{
fullName:function(){
return this.firstName + ' '+ this.lastName
}
}
})
</script>
計算されたプロパティのセッターとゲッター
属性プロパティの方法、つまり、の{
{fullname}}代わりに参照を使用して計算され{
{fullname()}}た上記の理由:(コード文字列の連結を変更する）
fullName属性对应的是一个对象，相当于在computed对象中定义一个属性fullName,对应的依旧是一个对象，
所以使用fullName属性，就写成{
{fullName}}.
计算属性中会有一个set方法、一个get方法，完整的计算属性应该写成下面的样子：
// 需要获取fullName的值的时候,就会调用get方法，
//所以页面显示的时abc,修改return的值就会更改fullName的值。
computed: {
// 计算属性的底层：
fullName: {
set: function () {
},
// 需要获取fullName的值的时候,就会调用get方法，
//所以页面显示的时abc,修改return的值就会更改fullName的值。
get: function () {
return 'abc'
//return this.firstName + ' '+ this.lastName
}
}
}
通常、属性を計算する目的は値を計算して結果を返すことであるため、setは使用されません。setは計算された属性の値を設定することです。writegetのみを削除して読み取り専用にすることもできます。属性：
computed: {
fullName: {
get: function () {
return 'abc'
}
}
}
setメソッドがない場合、コードは次のように省略して直接書き込むことができます:(使用された元の書き込みメソッド）
computed: {
fullName: function () {
return 'abc'
}
}
setメソッドを追加することもできます。
computed: {
fullName: {
set: function () {
console.log('--调用了set方法');
},
get: function () {
return 'abc'
}
}
デバッグツールでfullNameの値を変更して、setメソッドが呼び出されることを確認し
ます。fullNameのsetメソッドを使用します。
fullName: {
set: function (newValue) {
//传入一个参数
console.log('--调用了set方法',newValue);
const name = newValue.split(' ');
this.firstName = name[0];
this.lastName = name[1];
console.log(this.firstName);
console.log(this.lastName);
},
get: function () {
return this.firstName + ' '+ this.lastName;
}
}
コンソールで操作し、vm.fullNameの値を変更してページに表示されるfullNameを変更し、setメソッドで処理してthis.firstNameとthis.lastNameの値を変更します。
計算された属性とメソッドの比較（計算された属性のキャッシュ）：
計算された属性はキャッシュされ、計算された属性は、複数回使用された場合は1回だけ呼び出され、メソッド内のメソッドは、複数回使用された場合は複数回呼び出されます。
<body>
<div id="app">
<!-- 1 -->
<h2>{
{firstName}}{
{lastName}}</h2>
<!-- 使用methods -->
<h2>{
{getFullName()}}</h2>
<h2>{
{getFullName()}}</h2>
<h2>{
{getFullName()}}</h2>
<!-- 使用computed -->
<h2>{
{fullName}}</h2>
<h2>{
{fullName}}</h2>
<h2>{
{fullName}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
var vm=new Vue({
el:'#app',
data:{
message:'你好',firstName:'Lebron',lastName:'James'},
methods:{
getFullName:function(){
console.log('调用了methods');
return this.firstName + ' '+ this.lastName
}
},
computed:{
fullName:function(){
console.log('调用了computed');
return this.firstName + ' '+ this.lastName
}
}
})
</script>
</body>
演算結果：
