vue3调用参数方法返回值
Vue3中调用参数方法返回值的方式和Vue2类似,有以下几种方式:
1.在模板中使用方法和过滤器:
```。
<template>。
<div>。
。
<p>价格:{{getPrice(price)}}</p>。
。
<p>时间:{{timeStamp | formatTime}}</p>。
</div>。
</template>。
<script>。
export default 。
data() 。
return 。
price:100,。
timeStamp: w()。
}。
},。
methods: 。
//定义方法。
getPrice(price) 。
return price*2。
}。
},。
filters: 。
//定义过滤器。
formatTime(timeStamp) 。
return new Date(timeStamp).toLocaleString()。
}。
},。
}。
</script>。
```。
2. 在js中调用方法:
```。
<template>。
<div>。
<p>{{result}}</p>。
</div>。
</template>。
<script>。
export default 。
data() 。
return 。
num1:10,。js调用方法的三种写法
num2:20,。
result:0。
}。
},。
mounted()。
// 在mounted钩子中调用方法。
sult = this.add(this.num1, this.num2)。
},。
methods: 。
//定义方法。
add(num1, num2) 。
return num1+num2。
}。
},。
}。
</script>。
```。
3. 在js中调用计算属性:
```。
<template>。
<div>。
<p>{{fullName}}</p>。
</div>。
</template>。
<script>。
export default 。
data() 。
return 。
firstName:'Lucy',。
lastName:'Liu'。
}。
},。
//定义计算属性。
fullName() 。
return this.firstName+' '+this.lastName。
}。
},。
mounted()。
// 在mounted钩子中调用计算属性。
console.log(this.fullName)。
},。
}。
</script>。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论