計算されたプロパティ
計算された
元のデータ (データ) に対して追加の操作を実行する必要があり、元のデータに基づいて新しいデータを取得したいが、同時に元のデータを変更したくない場合は、計算されたプロパティを使用することを選択します。
計算されたプロパティのキャッシュ
まず、コードの一部を使って説明してみましょう。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计算属性</title>
</head>
<body>
<div id="app">
<p>{
{cnum}}</p>
<p>{
{mnum()}}</p>
<p>{
{cnum}}</p>
<p>{
{mnum()}}</p>
<p>{
{cnum}}</p>
<p>{
{mnum()}}</p>
</div>
</body>
<script src="js/vue.min.js"></script>
<script>
new Vue({
el:'#app',
data(){
return {
x:10,
y:20
}
},
// 计算属性
computed: {
cnum(){
console.log('computed');
return this.x+this.y*this.x-this.y;
}
},
methods:{
mnum(){
console.log('methods');
return this.x+this.y*this.x-this.y;
}
}
})
</script>
</html>
操作結果:
上記の結果から、最初の計算が完了した後に計算された属性の結果がキャッシュされることがわかり、その後の使用では、元のデータが変更されない限り、計算された属性は再計算されません。それぞれの用途は、キャッシュ内の結果を読み取ることです。
計算された属性が依存する元のデータが変更されると、計算された属性は再計算されます。つまり、計算された属性に対応するメソッドが再度呼び出されます。
Vue の場合、ショッピング カート コードを書き換えます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>购物车</title>
<style>
table {
border-collapse: collapse;
}
th,
td {
width: 100px;
height: 50px;
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<table>
<thead>
<tr>
<th>商品编号</th>
<th>商品名称</th>
<th>商品单价</th>
<th>商品数量</th>
<th>商品总价</th>
<th>商品操作</th>
</tr>
</thead>
<tbody>
<tr v-if="goodsData.every(item => item.count===0)">
<td>购物车为空</td>
</tr>
<template v-for="(item,index) in filterGoodsData">
<tr :key="item.id">
<td>{
{item.id}}</td>
<td>{
{item.name}}</td>
<td>{
{item.price}}</td>
<td>
<button @click="item.count--">-</button>
<span>{
{item.count}}</span>
<button @click="item.count++">+</button>
</td>
<td>{
{item.count*item.price}}</td>
<td>
<button @click="goodsData.splice(index,1)">删除</button>
</td>
</tr>
</template>
</tbody>
</table>
<p>合计：{
{totalPrice}}</p>
</div>
</body>
<script src="js/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
goodsData: [
{ id: 1, name: '苹果', price: 20, count: 1 },
{ id: 2, name: '香蕉', price: 10, count: 2 },
{ id: 3, name: '橘子', price: 15, count: 4 }
]
}
},
computed:{
totalPrice(){
return this.goodsData.reduce((sum,item)=>{
return sum+item.price*item.count;
},0)
},
filterGoodsData(){
return this.goodsData.filter(item=>item.count>0);
}
}
})
</script>
</html>数量が0でない商品を新しい配列に入れ、元の配列は変更しないでください。
計算されたプロパティのゲッターとセッター
例: ボタンをクリックして値を変更する
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计算属性</title>
</head>
<body>
<div id="app">
<p>{
{cnum}}</p>
<button @click="cnum = 'Li Si'">修改</button>
</div>
</body>
<script src="js/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
xing:'Zhang',
ming:'Ling'
}
},
// 计算属性
computed: {
cnum: {
get() {
return this.xing +' '+ this.ming;
},
set(val) {
this.xing = val.split(' ')[0];
this.ming = val.split(' ')[1];
}
}
},
})
</script>
</html>クリック前： クリック後：
