<body>
<div id="app">
<!--1、拼接 语法过于繁琐 -->
<h2>{{firstName}} {{lastName}}</h2>
<!--2、通过函数 当被调用多次的时候 函数会被执行多次 -->
<h2>{{getFullName()}}</h2>
<!-- 3、通过计算属性 当被调用多次的时候 函数只会执行一次 效率更高 -->
<h2>{{FullName}}</h2>
</div>
<script type="text/javascript" src="./js/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
el:'#app',//用于挂载管理的元素
data:{
firstName:'Gary',
lastName:'Yao',
},
methods:{
getFullName:function(){
console.log('getFullName');
return this.firstName + ' '+ this.lastName;
}
},
computed:{
FullName:function(){
console.log('FullName');
return this.firstName + ' '+ this.lastName;
}
}
});
</script>
</body>
Vue计算属性和函数的对比
最新推荐文章于 2024-07-22 09:04:09 发布