<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
姓:<input type="text" v-model="firstName">
名:<input type="text" v-model="lastName">
<!-- 第一种 不用 使用js的拼接 数据在模板当中 this全部指向的是vm 模板当中this可以省略 -->
<p>{{firstName+'-'+lastName}}</p>
<!-- 第二种 不用 封装函数去写 -->
<p>{{getFullName()}}</p>
<!-- 第三种 计算属性 -->
<p>{{fullName}}</p>
</div>
<script src="./js/vue.js"></script>
<script>
const vm = new Vue ({
el:'#app',
data(){
return{
firstName:'zhao',
lastName:'liying'
}
},
methods:{
getFullName(){
// 在vue中所有的函数内部的this都指向vm,因为这些方法或者函数都会被vm代理
return this.firstName+ '-' +this.lastName
}
},
// 当我需要一个数据,但是这个数据我没有,并且这个数据是由目前我有的数据计算而来的 就要用计算属性
computed:{
// fullName:{
// get(){
// return this.firstName +'-'+ this.lastName
// },
// set(){
// }
// }
fullName(){
return this.firstName + '-' + this.lastName
}
}
})
// 使用方法去获取姓名和使用计算属性去计算姓名的区别
// 对于方法调用:你使用了几次方法调用,这个方法就调用了几次
// 对于计算属性:你使用了不管多少次 计算属性的get方法只调用了一次
// 计算属性一定存在缓存 这样有缓存使用多次的时候效率比方法高
</script>
</body>
</html>
扫一扫
484
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
