Computed property
-
Computed properties: Equivalent to variables that can be computed by code. (Automatically update and return the calculation result)
-
Writing steps:
-
Step 1: Declare computed properties: (write logic code), declare in computed
-
computed: {
//属性名() { return 返回值 }
total() {
return 0
}
},Step 2: Use a computed property: the same as a normal variable
{
{total}}Case: reverse (invert) the string, "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>Case 2: data, methods, computed comparison, 'display name, 2 text boxes, one is last name, one is first name'
<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>filter
-
Filter: is the secondary processing of existing data
grammar
Syntax 1: no arguments
-
Declarative filter (data/methods level)
filter: {
过滤器名称(已有数据) {
return 处理结果
}}-
use filter
{
{变量 | 过滤器}}Syntax 2: There are parameters
-
Declarative filter (data/methods level)
filter: {
过滤器名称(已有数据, 变量1,变量2,... ) {
return 处理结果
}
}use filter
{
{变量 | 过滤器(参数1,参数2,...) }}case
Case 1: Fixed 2 decimal places
<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>Case 2: Specify the number of decimal places
<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>listener
-
Listener: When the data changes, the listener can trigger the corresponding event.
grammar
Syntax 1: Monitor common variables
data() {
return {
变量：1
}
},
watch: {
变量() { //data.变量的监听处理函数
}
}Syntax 2: Deep listening
data() {
return {
对象变量：{
属性1: 值,
属性2: 值,
}
}
},
watch: {
对象变量: {
handler() {}, //处理函数
deep: true //深度监听，属性值发生变化时，也可以监听
}
}case
-
Listen to normal variables and object variables
<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>Case: shopping cart
need
accomplish
-
step:
-
Step 1: Page display (Cart.vue, routing, path/cart)
-
Step 2: Display data (simulated product list, v-for display), (check box, price, time, total price)
-
<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>Case: Calculate the total
computed: {
//属性名() { return 返回值 }
total() {
let sum = 0 ;
this.productList.forEach(product => {
// 小计的和
sum += (product.price * product.count)
});
return sum
}
},