计算属性Computed
-
计算属性：相当于可以完成代码计算的变量。（自动更新，并返回计算结果）
-
编写步骤：
-
步骤1：声明计算属性：（编写逻辑代码），在computed中声明
-
computed: {
//属性名() { return 返回值 }
total() {
return 0
}
},步骤2：使用计算属性：与普通变量相同的
{
{total}}案例：将字符串反转（倒排），“ABC” --> "CBA"
<template>
<div>
<!--
split：字符串函数,将字符串按照指定的字符分割成数组
reverse：数组函数，将数组数据反转
join：数组函数，将数组按照指定的字符拼接成字符串
-->
{
{'ABC'.split('').reverse().join('')}}
{
{msg}}
</div>
</template>
<script>
export default {
computed: { //计算属性：可以实时进行计算的变量
msg() {
return 'XYZ'.split('').reverse().join('')
}
},
}
</script>
<style>
</style>案例2：data、methods、computed对比，‘显示姓名，2个文本框，一个是姓，一个是名’
<template>
<div>
<!-- 1.1 2个input -->
<input type="text" v-model="firstName">
<input type="text" v-model="secondName">
<!-- 2.2 触发函数 -->
<input type="button" value="显示" @click="exeName"> <br>
fullName : {
{fullName}} <br>
<!-- 3.2 显示结果 -->
fullName2 : {
{fullName2}} <br>
</div>
</template>
<script>
export default {
data() {
return {
// 1.2 两个变量 + 1个变量
firstName: '',
secondName: '',
fullName: ''
}
},
methods: {
// 2.1 声明函数
exeName() {
this.fullName = this.firstName + this.secondName
}
},
computed: {
// 3.1 声明计算属性
fullName2() {
// 格式：姓为'张',名为'三',全称为'张三'
return this.firstName + this.secondName
}
},
}
</script>
<style>
</style>过滤器
-
过滤器：是对已有数据的二次加工
语法
语法1：无参
-
声明过滤器 (data/methods平级)
filter: {
过滤器名称(已有数据) {
return 处理结果
}}-
使用过滤器
{
{变量 | 过滤器}}语法2：有参
-
声明过滤器 (data/methods平级)
filter: {
过滤器名称(已有数据, 变量1,变量2,... ) {
return 处理结果
}
}使用过滤器
{
{变量 | 过滤器(参数1,参数2,...) }}案例
案例1：固定2位小数位数
<template>
<div>
{
{num | parseNum }}
</div>
</template>
<script>
export default {
data() {
return {
num: 123.456
}
},
filters: {
parseNum( value ) {
// 数字保留2位小数
// Number(内容) ：将指定内容转换数字
// toFixed：数字对象函数，按照四舍五入，截取小数位数
return Number(value).toFixed(2)
}
}
}
</script>
<style>
</style>案例2：指定小数位数
<template>
<div>
{
{num | parseNum(1) }}
</div>
</template>
<script>
export default {
data() {
return {
num: 123.456
}
},
filters: {
parseNum( value, n ) {
// 数字保留2位小数
// Number(内容) ：将指定内容转换数字
// toFixed：数字对象函数，按照四舍五入，截取小数位数
return Number(value).toFixed(n)
}
}
}
</script>
<style>
</style>监听器
-
监听器：当数据发生改变时，监听器可以出发对应的事件。
语法
语法1：对普通变量进行监听
data() {
return {
变量：1
}
},
watch: {
变量() { //data.变量的监听处理函数
}
}语法2：深度监听
data() {
return {
对象变量：{
属性1: 值,
属性2: 值,
}
}
},
watch: {
对象变量: {
handler() {}, //处理函数
deep: true //深度监听，属性值发生变化时，也可以监听
}
}案例
-
监听普通变量和对象变量
<template>
<div>
msg: <input type="text" v-model="msg"> <br>
username: <input type="text" v-model="user.username">
</div>
</template>
<script>
export default {
data() {
return {
msg: '', //普通变量
user: { //对象遍历
username: ''
}
}
},
watch: {
msg(val, oldValue) { //普通变量的监听处理函数
console.info(`msg : 新值${val} ,旧值${oldValue}`)
},
user: {
handler(val, oldValue) {
console.info(`user : 新值${val.username} ,旧值${oldValue.username}`)
},
deep: true //深度监听
}
},
}
</script>
<style>
</style>案例：购物车
需求
实现
-
步骤：
-
步骤1：页面显示（Cart.vue、路由、路径 /cart）
-
步骤2：展示数据（模拟商品list、v-for展示）、（复选框、价格、时间、总价）
-
<template>
<div>
<table border="1">
<tr>
<td>
<input type="checkbox" name="" id="">
</td>
<td>编号</td>
<td>标题</td>
<td>价格</td>
<td>数量</td>
<td>日期</td>
<td>小计</td>
</tr>
<tr v-for="(product,index) in productList" :key="index">
<td>
<input type="checkbox" name="" id="">
</td>
<td>{
{product.pid}}</td>
<td>{
{product.title}}</td>
<td>{
{product.price}}</td>
<td>
<a href="" @click.prevent="product.count--">-</a>
{
{product.count}}
<a href="" @click.prevent="product.count++">+</a>
</td>
<td>{
{product.createDate}}</td>
<td>
<!-- 小计：单价 * 数量 -->
{
{product.price * product.count}}
</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>总计：</td>
<td>
<!-- 总计：所有小计的和 -->
</td>
</tr>
</table>
</div>
</template>
<script>
export default {
data() {
return {
productList: [ //模拟商品数据
{
pid: 'p001',
title: '衣服',
price: '998.45',
count: '9', //购买数量
createDate: '2022-03-07 11:28:45'
},
{
pid: 'p002',
title: '电脑',
price: '9768.76',
count: '10', //购买数量
createDate: '2022-03-07 11:28:45'
}
]
}
},
}
</script>
<style>
</style>案例：计算总计
computed: {
//属性名() { return 返回值 }
total() {
let sum = 0 ;
this.productList.forEach(product => {
// 小计的和
sum += (product.price * product.count)
});
return sum
}
},