Vueの計算されたプロパティについて話す

計算された計算されたプロパティ

1.計算されたプロパティとは何ですか

計算されたプロパティは本質的にメソッドですが、これらの計算されたプロパティを使用する場合、それらの名前はプロパティとして直接使用され、計算されたプロパティはメソッドとして呼び出されず、括弧（）はそれらを呼び出す必要はありません。

2.計算されたプロパティを使用する理由

属性が必要な場合は、いくつかの計算を行う必要があります。たとえば、割引されたお金の属性が必要な場合は、価格と割引があります。次に、discounted = price*discount。割引は、既存の物件の価格と割引に関連付けられています。

割引の価値を得るには、次のように書くことができます。

<div>{
   
   {price*discount}}</div>

割引属性が必要ではありませんか？これを記述するために属性を追加する必要はないようです。式を直接使用して割引値を計算できます。

したがって、割引を受ける必要がある場合は、計算するメソッドを使用してメソッドを作成することを検討できます。

<！--template-->
<div class="price">
        原价：<span v-text="price"></span><br>
        现价： <span v-text="discounted()"></span>
</div>
<！--script-->
  data() {
    return {
      price:100,
      discount:0.8
    }
  }，
  methods: {
  discounted(){
      this.price*discount
    }
  },

vueのコミュニティ計算プロパティを見てください

<！--template-->
<div class="price">
        原价：<span v-text="price"></span><br>
        现价： <span v-text="discounted"></span>
</div>
<！--script-->
computed: {
    discounted(){
      return this.price*this.discount
    }
  },

もう一度考えてみますが、price * discountという表現を使って割引を受けることはできませんか？

次に問題が発生します。割引が購入金額に基づいている場合は、次のルールに従ってください。

元の価格x	割引
0 <x <= 50	0.9
50 <x <= 100	0.85
100 <x	0.8

では、どうすればこれを達成できますか？まずは式で直接見てみましょう。

ここでエラーが報告されます。明らかに複数行の式はサポートされていません。少し複雑な計算を行う必要がある場合は、関数を使用する必要があります。

ただし、単純な式でさえ、計算式または計算式で記述することをお勧めします。

たとえば、関心の分離を念頭に置いてプログラムを作成するため、cssは<style>で記述され、jsは<script>で記述されます。これにより、コードが読みやすくなり、コードがより標準化されます。

---

次に、別の問題があります。ここで目的の値を取得しましたが、メソッドを使用するだけでは不十分であることがわかりました。なぜ計算する必要があるのでしょうか。また、この2つの違いは何ですか。

1.メソッドを使用する場合、通常は括弧が必要ですが、計算は必要ありません。

2.メソッドは呼び出されるたびに関数を再実行しますが、computedは、内部変数が変更されないか、戻り値が変更されない場合に1回だけ実行され、計算結果は後続の実行中にキャッシュから直接取得されます。

計算が括弧を使用して同様のメソッドを呼び出さない理由は、計算自体が属性であるためです。その本質は、計算内に2つのメソッド（setとget）があることです。calculatedの最終的な道徳的結果は、 getメソッド、setメソッドはめったに使用されないため、簡略化された書き込みメソッドは、上記の計算された形式の通常の使用です。

3.コンピューティング、メソッド、ウォッチの違い

	計算された	メソッド	見る
キャッシュ	持ってる	いいえ	いいえ
非同期	いいえ	いいえ	行
引き金	テンプレートの使用法：データ	テンプレートの使用法：メソッド	変更を送信する監視対象データ
柔軟性	最低	高い	最高
おすすめ	最高	2番	最小（依存関係は簡単に複雑になる可能性があります）

4.ケース：配列オブジェクトをトラバースするときに監視する

次に、通常、配列を監視し、トラバース時に現在の配列のオブジェクトを監視します。どうすればよいですか。

計算には、検出するオブジェクトのパラメータを渡すこともできます。現在のオブジェクトを渡すだけなので、検出されたデータは動的です。

昨日CSSで遊んだときに書いた例を使ってみましょう。私はここで価格に注意を払う必要があるだけです、他のものは無視することができます、そして私はそれを変えるのが面倒です、ハハ。

<template>
  <div class="container">
    <div
      class="list"
      v-for="item in list"
      :key="item"
    >
      <div class="list-item">
        <img
          :src="item.url"
          alt=""
        >
          <div class="item-select">
            <!-- <div style="width:120px;float:left;">
              <button>喜欢</button>
            </div>
            <div style="width:120px;float:left;">
              <button>不喜欢</button>
            </div> -->
            <svg v-show="!item.like" @click="liked(item)" t="1647706494573" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5953" width="200" height="200"><path d="M935.669676 115.583774C871.255802 51.1699 792.995954 24.681952 709.318118 37.925926c-66.219871 10.23398-133.643739 45.751911-196.853616 102.3398C448.652627 83.677837 381.228759 48.159906 315.008888 37.925926 231.331051 24.681952 153.071204 51.1699 88.65733 115.583774 23.641457 180.599647-7.060483 266.08348 1.367501 355.781305c9.029982 89.095826 55.383892 178.191652 134.245738 257.053498 12.039976 12.039976 55.985891 55.985891 100.533804 100.533804l0 0c53.577895 54.179894 108.359788 108.961787 109.563786 110.165785 0.601999 0.601999 1.203998 0.601999 1.805996 1.203998L511.862503 989.084068l48.761905-48.159906 4.815991-4.213992c9.029982 0 265.481481-267.287478 322.069371-324.477366 78.861846-78.861846 125.215755-167.957672 134.245738-257.053498C1031.387489 266.08348 1000.685549 180.599647 935.669676 115.583774zM147.653215 322.67137c-6.019988 18.059965-9.631981 34.915932-10.835979 47.557907-1.805996 13.845973-13.243974 24.079953-27.089947 24.079953l-1.805996 0c-16.855967 0-30.099941-15.651969-27.089947-32.507937 3.611993-21.069959 9.029982-40.333921 15.049971-57.791887 6.019988-16.253968 25.283951-22.875955 40.333921-14.447972 0 0 0.601999 0 0.601999 0C147.051216 296.183422 151.867207 310.029394 147.653215 322.67137zM364.372792 140.867725c0 13.243974-9.029982 24.681952-22.273956 27.089947-79.463845 13.243974-127.623751 48.159906-158.325691 86.687831-8.427984 10.835979-24.079953 13.845973-36.119929 6.621987 0 0-0.601999 0-0.601999 0-13.845973-8.427984-16.855967-27.691946-7.223986-40.93592 60.199882-78.861846 146.285714-103.543798 192.639624-110.767784 16.855967-2.407995 31.303939 10.23398 31.303939 27.089947L363.770793 140.867725z" p-id="5954" fill="#bfbfbf"></path></svg>
            <svg v-show="item.like" @click="liked(item)" t="1647706494573" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5953" width="200" height="200"><path d="M935.669676 115.583774C871.255802 51.1699 792.995954 24.681952 709.318118 37.925926c-66.219871 10.23398-133.643739 45.751911-196.853616 102.3398C448.652627 83.677837 381.228759 48.159906 315.008888 37.925926 231.331051 24.681952 153.071204 51.1699 88.65733 115.583774 23.641457 180.599647-7.060483 266.08348 1.367501 355.781305c9.029982 89.095826 55.383892 178.191652 134.245738 257.053498 12.039976 12.039976 55.985891 55.985891 100.533804 100.533804l0 0c53.577895 54.179894 108.359788 108.961787 109.563786 110.165785 0.601999 0.601999 1.203998 0.601999 1.805996 1.203998L511.862503 989.084068l48.761905-48.159906 4.815991-4.213992c9.029982 0 265.481481-267.287478 322.069371-324.477366 78.861846-78.861846 125.215755-167.957672 134.245738-257.053498C1031.387489 266.08348 1000.685549 180.599647 935.669676 115.583774zM147.653215 322.67137c-6.019988 18.059965-9.631981 34.915932-10.835979 47.557907-1.805996 13.845973-13.243974 24.079953-27.089947 24.079953l-1.805996 0c-16.855967 0-30.099941-15.651969-27.089947-32.507937 3.611993-21.069959 9.029982-40.333921 15.049971-57.791887 6.019988-16.253968 25.283951-22.875955 40.333921-14.447972 0 0 0.601999 0 0.601999 0C147.051216 296.183422 151.867207 310.029394 147.653215 322.67137zM364.372792 140.867725c0 13.243974-9.029982 24.681952-22.273956 27.089947-79.463845 13.243974-127.623751 48.159906-158.325691 86.687831-8.427984 10.835979-24.079953 13.845973-36.119929 6.621987 0 0-0.601999 0-0.601999 0-13.845973-8.427984-16.855967-27.691946-7.223986-40.93592 60.199882-78.861846 146.285714-103.543798 192.639624-110.767784 16.855967-2.407995 31.303939 10.23398 31.303939 27.089947L363.770793 140.867725z" p-id="5954" fill="#d4237a"></path></svg>
          </div>
          <div class="price">
        原价：<span v-text="item.price"></span><br>
        现价： <span v-text="discounted(item)"></span><br>
        (点亮中间的爱心再减5元！)
      </div>
      </div>
  </div>
  </div>
</template>

<script>
export default {
  name: "Child",
  data() {
    return {
      list: [
        {
            price:88.88,
          like: false,
          url:
            "https://tse4-mm.cn.bing.net/th/id/OIP-C.E5Ce0SanbLrLCq6j5IQXVQHaE7?w=268&h=180&c=7&r=0&o=5&dpr=1.12&pid=1.7",
        },
        {
            price:100,
          like: false,
          url:
            "https://img.zcool.cn/community/0146eb57d154f40000018c1b84142e.jpg@1280w_1l_2o_100sh.jpg",
        },
        {
            price:20.56,
          like: false,
          url:
            "https://img.zcool.cn/community/[email protected]",
        },
        {
          price:100.50,
           like: false,
          url:
            "https://img.zcool.cn/community/0159bc5767a2600000018c1b76f216.jpg@1280w_1l_2o_100sh.jpg",
        },
        {
            price:666.00,
           like: false,
          url:
            "https://img.zcool.cn/community/0132e85e0abc74a8012165180d2178.jpg@1280w_1l_2o_100sh.jpg",
        },
      ],
      price:100,
      discount:0.8
    }
  },
  computed: {
    discounted(){
        return function(item){
          //对价格进行条件计算
          let price = item.price
          if(0<price&&price<=50){
              price = price*0.9
          }else if(50<price&&price<=100){
             price = price*0.85
          }else if(100<price){
             price = price*0.8
          }
          if(item.like){
            price -= 5
          }
          //返回两位小数
          return price.toFixed(2)
        }
    },
  },
  methods: {
    liked(item){
        item.like = !item.like
    }
  },  
};
</script>

<style>
body {
background-image: linear-gradient(to top, #c4c5c7 0%, #dcdddf 52%, #ebebeb 100%);
}
.container {
  margin: 0 auto;
  width: 400px;
  /* border: 1px solid black ; */
}
.list-item {
  margin-top: 40px;
}
p {
  margin: 10px 40%;
}
.list-item img {
  width: 100%;
  height: 300px;
  border-radius: 20px;
  box-shadow: 5px 10px 13px 3px rgba(110, 115, 127, 0.5);
  opacity: 0.8;
  transition: 0.8s;
}
.list-item img:hover {
  opacity: 1;
}
.item-select {
  width: 100%;
  height: 80px;
  position: relative;
}
/* .item-select button {
  color: white;
  font-weight: bold;
  font-family: 幼圆;
  margin-top: 20px;
  width: 100px;
  height: 55px;
  margin-left: 90px;
  background-image: linear-gradient(to top, #a3bded 0%, #6991c7 100%);
  padding: 15px;
  display: inline;
  font-size: 18px;
  text-align: center;
  border-radius: 10px;
  transition: 0.5s;
  white-space: nowrap;
  border: 1px #dee7ec solid;
  opacity: 0.8;
}
button:hover {
  background-image: linear-gradient(to right, #ff758c 0%, #ff7eb3 100%);
  color: white;
  width: 105px;
  height: 60px;
} */
.list-item svg{
  width: 60px;
  height: 60px;
  margin: 20px 170px;
  position:absolute;
  left: 0;
  top: 0;
  transition: 0.3s;
}
.list-item svg:hover{
  width: 65px;
  height: 65px;
  transition: 0.1s;
}
</style>

監視が成功するかどうか見てみましょう

愛を照らす機能を追加し、マイナス5元

好きなメソッドを追加し、クリックして現在のオブジェクトの好きなものを元に戻します

計算された属性に別の条件を追加します。愛が点灯している場合、つまりlike = trueの場合、5元が差し引かれます。

愛を照らすと、現在の価格が5元引き下げられ、ライトをキャンセルして元の価格に戻すことができ、監視が成功したことを示します。

効果を見てみましょう

消灯すると、価格が再開されます。