Diretório de artigos
propriedades computadas computadas
1. O que é uma propriedade computada
Propriedades computadas são essencialmente métodos, mas ao usar essas propriedades computadas, seus nomes são usados diretamente como propriedades, e propriedades computadas não são chamadas como métodos e parênteses () não são necessários para chamá-los.
2. Por que usar propriedades computadas
Quando você precisa de um atributo, você precisa fazer alguns cálculos, por exemplo, se você quer um atributo de dinheiro com desconto, agora tem preço e desconto. Então descontado=preço*desconto. com desconto está associado ao preço e desconto das propriedades existentes.
Para obter o valor do desconto, podemos escrever assim.
<div>{
{price*discount}}</div>
Não queremos o atributo descontado? Parece que não precisamos adicionar um atributo para escrever isso, e podemos usar diretamente a expressão para calcular o valor descontado.
Então, se tivermos que obter um desconto, podemos pensar em escrever um método com métodos para calcular
<!--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
}
},
Dê uma olhada na propriedade computada comunidad do 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
}
},
Vamos pensar novamente, não podemos ser descontados usando a expressão preço*desconto?
Aí vem o problema, se nosso desconto for baseado no valor que você comprou, siga as regras:
Preço original x | Desconto |
---|---|
0<x<=50 | 0,9 |
50<x<=100 | 0,85 |
100<x | 0,8 |
Então, como conseguimos isso? Vamos tentar ver isso diretamente com expressões primeiro.
Um erro é relatado aqui, obviamente, as expressões de várias linhas não são suportadas. Se precisarmos passar por alguns cálculos um pouco complicados, temos que usar funções.
No entanto, ainda é recomendado que mesmo expressões simples sejam escritas em
Porque escrevemos programas com a ideia de separação de interesses , por exemplo, css é escrito em < style >, e js é escrito em < script >, o que é mais conveniente para a gente ler e deixa o código mais padronizado.
Então, há outro problema: obtivemos o valor desejado aqui, mas descobrimos que não é suficiente usar métodos, por que precisamos calcular e qual é a diferença entre os dois?
1. Quando os métodos são usados, os parênteses geralmente são necessários, mas o cálculo não.
2. Os métodos irão reexecutar a função cada vez que ela for chamada, enquanto computado só será executado uma vez se suas variáveis internas permanecerem inalteradas ou seu valor de retorno permanecer inalterado, e o resultado computado será obtido diretamente do cache nas execuções subsequentes.
Quanto ao motivo pelo qual computado não usa parênteses para chamar métodos semelhantes, é porque computado em si é um atributo. Sua essência é que existem dois métodos (set e get) dentro de computado. O resultado moral final de computado é o valor de retorno do get, enquanto o método set raramente é usado, então o método de escrita simplificado é o uso normal do formato calculado acima.
3. A diferença entre computação, métodos e observação
calculado | métodos | Assistir | |
---|---|---|---|
esconderijo | ter | não | não |
assíncrono | não | não | Fileira |
acionar | Uso do modelo: dados | Uso do modelo: método | Alterações de envio de dados monitorados |
flexibilidade | mais baixo | Alto | Altíssima |
recomendação | Altíssima | Segundo | Mínimo (dependências podem se complicar facilmente) |
4. Caso: Monitore ao percorrer objetos de matriz
Em seguida, geralmente monitoramos o array e monitoramos os objetos do array atual durante a travessia.O que devemos fazer?
Também podem ser passados parâmetros computados, qual objeto queremos detectar, basta passar no objeto atual, para que os dados detectados sejam dinâmicos.
Deixe-me usar o exemplo que escrevi ontem quando joguei com CSS. Só preciso prestar atenção no preço aqui, os outros podem ser ignorados, e estou com preguiça de mudar, haha.
<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>
Vamos ver se o monitoramento é bem sucedido
Adicione uma função para acender o amor e depois menos 5 yuan
Adicione um método like, clique para reverter o like do objeto atual
Adicione outra condição ao atributo calculado. Quando o amor estiver aceso, ou seja, like=true, então 5 yuan serão subtraídos.
Se você acender o amor, o preço atual pode ser reduzido em 5 yuans, cancelar a luz e restaurar o preço original, indicando que o monitoramento foi bem-sucedido.
Vamos ver o efeito
Quando apagado, o preço será retomado.