Vue_ElementUI之6_计算属性

最新推荐文章于 2024-03-03 07:45:00 发布

RobotB

最新推荐文章于 2024-03-03 07:45:00 发布

阅读量532

点赞数

分类专栏： Web前端

本文链接：https://blog.youkuaiyun.com/m0_47572402/article/details/114157064

版权

Web前端专栏收录该内容

8 篇文章

订阅专栏

本文适用于Web入门级或偏中级前端爱好者等，内容是作者在51CTO的学习笔记，提交于github，有时候也没时间更新优快云，github对于部分同学可能也有一定的难度，本着开源的精神，较入门偏引导的小篇幅学习资料进行分享，希望对大家有帮助，也感谢大家的三联，我们走起！学到知识就好哦！知识版权申明，本知识体系是51CTO某位老师的课程，鉴于老师已在51CTO取得收益，故我不再进行版权申明和导流并作为知识技能分享，也希望老师看到能理解。

6_计算属性

6_1计算属性

JS语法computed
Vue函数形式methods

6_2示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>6_计算属性</title>
</head>
<body>

<!--DOM-->
<div id="app">
sum1={{sum}}<br>
sum2={{sum}}<br>
<span v-html="sum"></span><br>

sum2={{test1()}}<br>
sum1={{test2()}}<br>
</div>

<!--引入vue-->
<script src="../js/vue.js"></script>

<!--javascript-->
<script>
<!--vue&javascript-->
	var data={
	price:10,
	num:5
	};
	var vm=new Vue({
	el:'#app',
	data:data,
	computed:{
	sum:function(){
	console.log('sum');
	return '<span>'+this.$data.price*this.$data.num			+'</span>';
	}
	},
	methods:{
		test1:function(){
		console.log('methods1');
		return this.$data.price*this.$data.num;
		},
		test2:function(){
		console.log('methods2');
		return this.$data.price/this.$data.num;
		}
	}
	});
</script>
</body>
</html>