欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue的computed計算屬性你了解嗎

 更新時間：2022年03月21日 15:52:54   作者：冰咖啡iii  
這篇文章主要為大家詳細介紹了Vue的computed計算屬性，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

computed計算屬性

1、什么是計算屬性

計算屬性 本質(zhì)是方法，只是在使用這些 計算屬性 的時候，把他們的名稱直接當作 屬性 來使用，并不會把 計算屬性 當作方法去調(diào)用，不需要加小括號 ()調(diào)用。

2、為什么要用計算屬性

當你需要一個屬性是需要經(jīng)過一些計算的，比如你要一個discounted折扣后的錢屬性，現(xiàn)在有price價格，和discount折扣。那么discounted=price*discount。discounted與現(xiàn)有的屬性price和discount相關聯(lián)。

要得出discounted的值，我們可以這樣寫。

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

我們不是要 discounted屬性嗎，這樣寫貌似不需要添加一個屬性，直接用表達計算出折扣后的值就行了。

那么，如果非要得到個discounted呢，我們可能會想到用methods寫個方法進行計算

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

再看看vue的comunidad計算屬性

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

在這里插入圖片描述

我們又會想，用表達式price*discount不就可以得出discounted嗎，為什么還要費那么大功夫?qū)懯裁捶椒?，computed。

那么問題就來了，如果我們的discounted是根據(jù)你買的金額，按一下規(guī)則來：

原價x折扣
0<x<=500.9
50<x<=1000.85
100<x0.8

那么我們該如何實現(xiàn)呢？我們先試著直接用表達式看看。

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-ieZUyIeJ-1647751350250)(C:\Users\19664\AppData\Roaming\Typora\typora-user-images\image-20220320101855428.png)]

這里報錯了，顯然不支持多行表達式。如果需要經(jīng)過一些稍微復雜的計算，我們就必須使用函數(shù)了。

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-g88E56d8-1647751350251)(C:\Users\19664\AppData\Roaming\Typora\typora-user-images\image-20220320102058133.png)]

但是，還是建議即使是簡單的表達式，還是建議寫成computed或者computed里

因為我們寫程序要有關注分離的思想，比如css就寫在< style >里，js就寫在< script >里，這樣更方便我們閱讀，也使代碼更加規(guī)范。

那么，又有問題來了，這里我們的確得出了想要的值，但我們發(fā)現(xiàn)用methods不就行了嗎，為啥還要computed呢，這兩者有什么區(qū)別?

  • 1、methods使用時，一般情況需要加括號，而computed則不需要。
  • 2、methods每次調(diào)用時會重新執(zhí)行函數(shù)，而computed在其內(nèi)部變量不變或其返回值不變的情況下多次調(diào)用只會執(zhí)行一次，后續(xù)執(zhí)行時直接從緩存中獲取該computed的結(jié)果。

至于為什么computed為什么不像methods一樣使用小括號調(diào)用，是由于computed本身就是一個屬性，其本質(zhì)是computed內(nèi)部有兩個方法（set和get），computed最終的道德的結(jié)果是get方法的返回值，而set方法很少使用到，因此簡化寫法就是上述正常使用computed的格式。

3、compute、methods和watch三者的區(qū)別

 computedmethodswatch
緩存有沒有沒有
異步不行不行行
觸發(fā)模板使用：數(shù)據(jù)模板使用：方法被監(jiān)控數(shù)據(jù)發(fā)送變動
靈活度最低高最高
推薦度最高其次最低（依賴關系容易變得復雜）

4、案例：遍歷數(shù)組對象的時候進行監(jiān)視

那么我們一般對數(shù)組監(jiān)視，在遍歷的時候?qū)Ξ斍皵?shù)組的對象進行監(jiān)視，我們該怎么做呢。

computed也是也可以傳參的，我們要檢測哪個對象，把當前對象傳入就可以了，這樣檢測的數(shù)據(jù)就是動態(tài)的。

我直接用昨天玩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>

        現(xiàn)價： <span v-text="discounted(item)"></span>

        (點亮中間的愛心再減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/01e89b5ddfb3c7a80120686b029383.jpg@2o.jpg",
        },
        {
          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
          }
          //返回兩位小數(shù)
          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>

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-X0t5vLjw-1647751350251)(C:\Users\19664\AppData\Roaming\Typora\typora-user-images\image-20220320114231173.png)]

我們來看看是否監(jiān)視成功

加個點亮愛心再減5元的功能

添加個liked方法，點擊了就將當前對象的like取反

在計算屬性中再添加一個條件，當點亮了愛心，也就是like=true，就再減5元

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-1j36wJXP-1647751350252)(C:\Users\19664\AppData\Roaming\Typora\typora-user-images\image-20220320123219102.png)]

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-kZyCHmfe-1647751350252)(C:\Users\19664\AppData\Roaming\Typora\typora-user-images\image-20220320123234180.png)]

如果點亮愛心，現(xiàn)價可以再減5元，取消點亮，恢復原來的價格，說明監(jiān)視成功。

來看看效果吧

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-x35C2rqo-1647751350253)(C:\Users\19664\AppData\Roaming\Typora\typora-user-images\image-20220320123559241.png)]

當取消點亮，價格又會恢復。

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-XFx5RYZl-1647751350253)(C:\Users\19664\AppData\Roaming\Typora\typora-user-images\image-20220320123916499.png)]

總結(jié)

本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關注腳本之家的更多內(nèi)容!      

相關文章

  • LogicFlow內(nèi)置菜單插件實例詳解

    LogicFlow內(nèi)置菜單插件實例詳解

    這篇文章主要為大家介紹了LogicFlow內(nèi)置菜單插件實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2023-01-01
  • vue.js與element-ui實現(xiàn)菜單樹形結(jié)構(gòu)的解決方法

    vue.js與element-ui實現(xiàn)菜單樹形結(jié)構(gòu)的解決方法

    本文通過實例給大家介紹了vue.js與element-ui實現(xiàn)菜單樹形結(jié)構(gòu)，非常不錯，具有參考借鑒價值,需要的朋友可以參考下
    2018-04-04
  • vue 獲取視頻時長的實例代碼

    vue 獲取視頻時長的實例代碼

    這篇文章主要介紹了vue 獲取視頻時長的實例代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-08-08
  • vue簡易記事本開發(fā)詳解

    vue簡易記事本開發(fā)詳解

    這篇文章主要為大家詳細介紹了vue簡易記事本的開發(fā)過程，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2021-06-06
  • el-tree?loadNode懶加載的實現(xiàn)

    el-tree?loadNode懶加載的實現(xiàn)

    本文主要介紹了el-tree?loadNode懶加載的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2022-08-08
  • 如何解決.vue文件url引用文件的問題

    如何解決.vue文件url引用文件的問題

    這篇文章主要介紹了解決.vue文件url引用文件的問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2019-01-01
  • 詳解Vue 2中的? initState 狀態(tài)初始化

    詳解Vue 2中的? initState 狀態(tài)初始化

    這篇文章主要介紹了詳解Vue 2中的initState狀態(tài)初始化，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下
    2022-08-08
  • VUE+Element UI實現(xiàn)簡單的表格行內(nèi)編輯效果的示例的代碼

    VUE+Element UI實現(xiàn)簡單的表格行內(nèi)編輯效果的示例的代碼

    這篇文章主要介紹了VUE+Element UI實現(xiàn)簡單的表格行內(nèi)編輯效果的示例的代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-10-10
  • vue中使用codemirror的實例詳解

    vue中使用codemirror的實例詳解

    這篇文章主要介紹了vue中使用codemirror的實例教程，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下
    2018-11-11
  • vue模塊導入報錯問題Module not found: Error:[CaseSensitivePathsPlugin]

    vue模塊導入報錯問題Module not found: Error:[CaseSensi

    這篇文章主要介紹了vue模塊導入報錯問題Module not found: Error:[CaseSensitivePathsPlugin]，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2023-06-06

最新評論