computed: {
//属性名() { return 返回值 }
total() {
return 0
}
},
步骤2:使用计算属性:与普通变量相同的
{{total}}
<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>
<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:无参
filter: {
过滤器名称(已有数据) {
return 处理结果
}}
{{变量 | 过滤器}}
语法2:有参
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>
<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
}
},