【汇智学堂】-Vue.js入门之四（计算属性的使用）

程序员文章站 2022-06-06 23:19:45

...

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h1>{{firstname}}</h1>	
			<h1>{{secondname}}</h1>
			<h1>{{fullname}}</h1>
		</div>
	</body>
		
	<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js'></script>
		
		<script>
			var vm=new 	Vue({
				el:'#app',
				data:{
					firstname:'hello world,I am Vue.js',
					secondname:'good!',
					fullname2:'come and study!'
				},
				computed:{
					fullname:function(){
						return this.firstname+','+this.secondname
					}
				}
			});
		</script>	
			
</html>