Vue.js 3.0 学习笔记（四）计算属性
一、使用计算属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用计算属性</title>
</head>
<body>
<div id="app">
原始字符串：<input type="text" v-model="message"><br/>
<!--可以直接调用reversedMessage，而不用加个括号-->
反转后的字符串：{{reversedMessage}}
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
//创建一个应用程序实例
const vm= Vue.createApp({
//该函数返回数据对象
data(){
return{
message: '小庭幽圃绝清佳 '
}
},
computed: {
//计算属性的getter，如果没有setter，则默认为getter，可以简写
reversedMessage(){
return this.message.split('').reverse().join('');
}
}
//在指定的DOM元素上装载应用程序实例的根组件
}).mount('#app');
</script>
</body>
</html>
二、计算属性的getter和setter方法
计算属性中的每一个属性对应的都是一个对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>getter和setter方法</title>
</head>
<body>
<div id="app">
<p>商品名称：{{name}}</p>
<p>商品价格：{{price}}</p>
<p>商品名称和价格：{{namePrice}}</p>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
//创建一个应用程序实例
const vm= Vue.createApp({
//该函数返回数据对象
data(){
return{
name:"洗衣机",
price:"6800元"
}
},
computed:{
namePrice:{
//getter方法，显示时调用
get:function(){
//拼接name和price，getter需要return
return this.name+ "**"+this.price;
},
//setter方法，设置namePrice时调用，其中参数用来接收新设置的值，可在控制台更改namePrice
set:function(newName){
var names=newName.split(' '); //以空格拆分字符串
this.name=names[0];
this.price=names[1]; //setter不需要return
}
}
}
//在指定的DOM元素上装载应用程序实例的根组件
}).mount('#app');
</script>
</body>
</html>
三、计算属性的缓存
computed相比于methods的好处是，只要相关依赖没有发生改变，访问计算属性时会立即返回之前的结果，而不必再次执行函数，也就是相当于有缓存
而methods中，不管相关依赖是否发生改变，methods里面的所有方法都会重新执行一次
PS：相关依赖就是方法里面变量的值或者可以变化的东西
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>方法调用方式</title>
</head>
<body>
<div id="app">
<button v-on:click="a++">a+1</button>
<button v-on:click="b++">b+1</button>
<p>number+a={{add1()}}</p>
<p>number+b={{add2()}}</p>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
//创建一个应用程序实例
const vm= Vue.createApp({
//该函数返回数据对象
data(){
return{
a:0,
b:0,
number:30
}
},
methods: {
add1:function(){
console.log("add1");
return this.a+this.number;
},
add2:function(){
console.log("add2");
return this.b+this.number;
}
}
//在指定的DOM元素上装载应用程序实例的根组件
}).mount('#app');
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>计算属性调用方式</title>
</head>
<body>
<div id="app">
<button v-on:click="a++">a+1</button>
<button v-on:click="b++">b+1</button>
<p>number+a={{add1}}</p>
<p>number+b={{add2}}</p>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
//创建一个应用程序实例
const vm= Vue.createApp({
//该函数返回数据对象
data(){
return{
a:0,
b:0,
number:30
}
},
computed: {
add1:function(){
console.log("number+a");
return this.a+this.number
},
add2:function(){
console.log("number+b")
return this.b+this.number
}
}
//在指定的DOM元素上装载应用程序实例的根组件
}).mount('#app');
</script>
</body>
</html>
四、使用计算属性代替v-for和v-if
就离谱
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用计算属性代替v-for和v-if</title>
</head>
<body>
<div id="app">
<h3>已经出库的商品</h3>
<ul>
<li v-for="goods in outGoodss">
{{goods.name}}
</li>
</ul>
<h3>没有出库的商品</h3>
<ul>
<li v-for="goods in inGoodss">
{{goods.name}}
</li>
</ul>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
//创建一个应用程序实例
const vm= Vue.createApp({
//该函数返回数据对象
data(){
return{
goodss: [
{name: '洗衣机', isOut: false},
{name: '冰箱', isOut: true},
{name: '空调', isOut: false},
{name: '电视机', isOut: true},
{name: '电脑', isOut: false}
]
}
},
computed:{
outGoodss(){
return this.goodss.filter(goods=>goods.isOut);
},
inGoodss(){
return this.goodss.filter(goods=>!goods.isOut);
}
}
//在指定的DOM元素上装载应用程序实例的根组件
}).mount('#app');
</script>
</body>
</html>
五、综合案例——使用计算属性设计购物车效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商品购物车</title>
</head>
<body>
<div id="app">
<div>
<div>
<h3 align="center">商品购物车</h3>
</div>
<div>
<div>
<label>
<input type="checkbox" v-model="checkAll">
全选
</label>
<label>
<input type="checkbox" v-model="checkNo">
反选
</label>
</div>
<ul>
<li v-for="(item,index) in list" :key="item.id">
<div>
<label>
<input type="checkbox" v-model="item.checked">
{{item.name}}
</label>
￥ {{item.price}}
<button type="button" @click="item.nums>1?item.nums-=1:1">-</button>
数量：{{item.nums}}
<button type="button" @click="item.nums+=1">+</button>
小计：{{item.nums*item.price}}
</div>
</li>
</ul>
<p align="right">总价：{{sumPrice}} <button type="button" @click="save" >提交订单</button></p>
</div>
</div>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
//创建一个应用程序实例
const vm= Vue.createApp({
//该函数返回数据对象
data(){
return{
list: [{
id: 1,
name: '洗衣机',
checked: true,
price: 6800,
nums: 1,
},
{
id: 2,
name: '电视机',
checked: true,
price: 4900,
nums: 1,
},
{
id: 3,
name: '饮水机',
checked: true,
price: 1000,
nums: 3,
},
],
}
},
computed: {
//全选
checkAll: {
// 设置值,当点击全选按钮的时候触发
set(v) {
this.list.forEach(item => {
item.checked = v
});
},
// 取值,当列表中的选择改变之后触发
get() {
return this.list.length === this.list.filter(item => item.checked == true).length;
},
},
//反选
checkNo: {
set() {
this.list.forEach(item => {
item.checked = !item.checked;
});
},
get() {
// return this.list.length === this.list.filter(item => item.checked == true).length;
},
},
// 总价计算
sumPrice() {
return this.list
.filter(item => item.checked)
/* reduce*******************************
arr.reduce(function (prev, cur, index, arr) {
...
}, init);
arr 表示原数组；
prev 表示上一次调用回调时的返回值， 或者初始值 init;
cur 表示当前正在处理的数组元素；
index 表示当前正在处理的数组元素的索引， 若提供 init 值， 则索引为0， 否则索引为1；
init 表示初始值。
常用的参数只有两个： prev 和 cur
求数组项之和
var sum = arr.reduce(function (prev, cur) {
return prev + cur;
}, 0); */
.reduce((pre, cur) => {
return pre + cur.nums * cur.price;
}, 0);
},
},
methods: {
save() {
console.log(this.list.filter(item =>
item.checked
));
}
},
//在指定的DOM元素上装载应用程序实例的根组件
}).mount('#app');
</script>
</body>
</html>
