Vue3框架学习之路6 Vue3计算属性

最新推荐文章于 2024-09-30 15:42:36 发布

God shen

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量105

点赞数

文章标签： vue 前端

本文链接：https://blog.csdn.net/weixin_53655745/article/details/119133614

版权

舟山停电了，一天没学，ε=(´ο｀*)))唉

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue3.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<p>原始字符串:{{message}}</p>
			<p>计算后反转字符串:{{reversedMessage}}</p>
		</div>
		<script type="text/javascript">
			const app = Vue.createApp({
				data(){
					return{
						message:'study Vue!'
					}
				},
				computed:{
					reversedMessage:function(){
						return this.message.split('').reverse().join('')
					}
				}
			})
			//此处提一下,computed也可以使用methods代替，但是computed性能更好，推荐使用
			app.mount("#app")
			//输出原始字符串:study Vue!

			//计算后反转字符串:!euV yduts
		</script>
		
	</body>
</html>