计算属性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：指定小数位数
1.<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 //深度监听，属性值发生变化时，也可以监听 } }
案例
- 监听普通变量和对象变量
1.<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 } },
