页面渲染的基本方法
1.直接拼接 <h2>{{firstName}}-{{lastName}}</h2>
2.使用调用方法 <h2>{{getFullName()}}</h2>
3.使用计算属性 <h2>{{fullName}}</h2>
( 调用方法和计算属性书写的区别是: 计算属性在页面渲染时 不需要加( ) )
代码演示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<h2>{{firstName}}-{{lastName}}</h2>
<h2>{{getFullName()}}</h2>
<h2>{{fullName}}</h2>
</div>
<script src="vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data() {
return {
firstName: 'zhang',
lastName: 'san'
}
},
methods: { //调用方法
getFullName() {
return this.firstName + '-' + this.lastName
}
},
computed: { //计算属性
fullName(){
return this.firstName + '-' + this.lastName
}
},
watch: { //侦听器 监听
}
})
</script>
</body>
</html>