- 监听属性:watch
具体用法如下所示:
<template>
<div id="different_type">
<el-button type="primary" size="small">城市名称</el-button>
<el-input type="text" v-model="cityName" style="width:200px;margin-left:20px"></el-input><br>
<el-input type="text" v-model="student.name" style="width:200px;margin-left:20px"></el-input>
</div>
</template>
<script>
export default {
data() {
return {
cityName:'linFen',
student:{
name:'仙女',
age:18
}
}
},
watch:{
//1.简单监听
cityName(newName,oldName){
console.log(newName,oldName) //linFenl,linfen
},
//2.发生变化时,调用监听处理函数
cityName: 'nameChange',
//3.immediate和handler immediate:立即监听,当值第一次绑定时,就会执行handler函数
cityName:{
handler(newName,oldName){
console.log(newName,oldName)
},
immediate:true
},
//4.监听对象,当要监听对象内部属性的变化时,需要深度监听,deep:true
student:{
handler(newName){
console.log(newName.name)
},
deep:true,
immediate:true
},
//5.可将4.优化成如下形式,即直接监听对象的某个属性
'student.name':{
handler(newName){
console.log(newName)
},
// deep:true,
immediate:true
}
},
methods: {
nameChange(){
alert(1)
}
},
}
</script>
- 计算属性:computed
具体用法如下所示:
<template>
<div id="different_type">
<div>{{message.split('').reverse().join("")}}</div>
<div v-for="(item,index) in result" :key="index">
<div>
<p>{{item.total}}</p>
</div>
</div>
总数:{{resultTotalR}}
</div>
</template>
<script>
export default {
data() {
return {
message:'helloWord',
result:[{
name:"张三",
total:2
},{
name:"李四",
total:3
},{
name:"王五",
total:5
}]
}
},
computed:{
resultTotalR(){
let resultTotal=0
this.result.forEach((item,index)=>{
resultTotal+=item.total
})
return resultTotal
}
},
methods: {
},
}
</script>
计算结果:
- filter
具体用法如下所示:
使用场景举例:
后台返回的数据是数字,我们需要根据数字显示相对应的文字
<template>
<div id="different_type">
<p>
<span :class="orderItem.status | getOrderStatus | getOrderStatusClass">{{ orderItem.status | getOrderStatus }}</span>
</p>
</div>
</template>
<script>
export default {
data() {
return {
orderItem:{
id: 2,
order_num: '123456789',
status: 1 // 1 待付款 2 待发货 3 待收货
}
}
},
filters:{
getOrderStatus(status) {
switch (status.toString()) {
case '1':
return '待付款';
case '2':
return '待发货';
case '3':
return '待收货';
default:
return '';
}
},
getOrderStatusClass(status) {
if (status == '待付款') {
console.log(status,"hhh")
return 'not-pay'
}else if(status == '待发货'){
return 'not-send'
}
return ''
}
},
methods: {
},
}
</script>
<style lang="scss" scoped>
#different_type {
width: 100%;
.not-pay {
color: red;
}
.not-send{
color: blue;
}
}
</style>
效果图:
三者的区别:
computed:
支持缓存,只有依赖数据发生改变,才会重新进行计算
不支持异步,当computed内有异步操作时无效,无法监听数据的变化
watch:
不支持缓存,数据变化,直接会触发相应的操作
支持异步操作
filter:
它可以当做函数使用,通过一些处理返回一些新的东西
eg:当后台返回的数据是数字,我们需要根据数字显示相对应的文字时使用,