一、 计算属性的基本使用
1.定义:要用的属性不存在,要通过已有属性计算得来。
2.原理:底层借助了0bjcet.defineproperty方法提供的getter和setter.
3.get函数什么时候执行?
- 初次读取时会执行一次。
- 当依赖的数据发生改变时会被再次调用。
4.优势:与methods实现相比,内部有缓存机制(复用),效率更高,调试方便。
5.备注:
- 计算属性最终会出现在vm上,直接读取使用即可。
- 如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变;
案例-姓名案例:
(1)通过计算属性实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../js/vue.js"></script>
</head>
<body>
<div id="root">
姓:<input type="text" v-model="firstName"><br>
名:<input type="text" v-model="lastName"><br>
全名:<span>{{fullName}}</span>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
Vue.config.keyCodes.huiche = 13//定义了一个别名按键13
//创建vue实例
var vm = new Vue({
el:'#root',
//data中存储属性
data:{
firstName: '吴',
lastName:'删'
},
//计算属性存储在computed
computed:{
fullName:{
//get的作用:当读取fullName是,get就会被调用,且返回值就作为fullName的值
get(){
// get什么时候调用
//1.初次读取fullName使;2.所依赖的数据发生变化时;
console.log('get被调用')
// console.log('this')//此处this为vm
return this.firstName + '-' + this.lastName
},
//调用时间:当fullName被修改时
set(value){
// console.log('set')
const arr = value.split('-')
this.firstName =arr[0]
this.lastName = arr[1]
}
}
}
})
</script>
</body>
</html>
(2)通过methods方法实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../js/vue.js"></script>
</head>
<body>
<div id="root">
姓:<input type="text" v-model="firstName"><br>
名:<input type="text" v-model="lastName"><br>
<!--事件中括号可加可不加,但在插值语法中一定要加-->
全名:<span>{{fullName()}}</span>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
Vue.config.keyCodes.huiche = 13//定义了一个别名按键13
//创建vue实例
new Vue({
el:'#root',
data:{
firstName: '吴',
lastName:'删'
},
methods:{
fullName(e){
// return 'css'
return this.firstName + "-" + this.lastName
}
}
})
</script>
</body>
</html>
(3)通过插值语法实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../js/vue.js"></script>
</head>
<body>
<div id="root">
姓:<input type="text" v-model="firstName"><br>
名:<input type="text" v-model="lastName"><br>
<!-- slice只获取姓的0-2位-->
全名:<span>{{firstName.slice(0,3)}}-{{lastName}}</span>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
Vue.config.keyCodes.huiche = 13//定义了一个别名按键13
//创建vue实例
new Vue({
el:'#root',
data:{
firstName: '吴',
lastName:'删'
}
})
</script>
</body>
</html>
二、计算属性的简写
只有在不考虑修改的时候才可以简写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../js/vue.js"></script>
</head>
<body>
<div id="root">
姓:<input type="text" v-model="firstName"><br>
名:<input type="text" v-model="lastName"><br>
全名:<span>{{fullName}}</span>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
Vue.config.keyCodes.huiche = 13//定义了一个别名按键13
//创建vue实例
var vm = new Vue({
el:'#root',
//data中存储属性
data:{
firstName: '吴',
lastName:'删'
},
//计算属性存储在computed
computed:{
//完整写法
/*fullName:{
get(){
console.log('get被调用')
// console.log('this')//此处this为vm
return this.firstName + '-' + this.lastName
},
set(value){
// console.log('set')
const arr = value.split('-')
this.firstName =arr[0]
this.lastName = arr[1]
}
}
*/
//简写:只有在不考虑修改时才可以进行简写;
fullName() {
console.log('get被调用')
// console.log('this')//此处this为vm
return this.firstName + '-' + this.lastName
}
}
})
</script>
</body>
</html>