1.vue计算属性，方法和侦听器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue计算属性，方法和侦听器</title>
<!--引入/vue.js-->
<script src="./vue.js"> </script>
</head>
<body>
<div id="app">
<!--{{fullName()}}-->
{{age}}
{{fullName}}
{{age}}
</div>
<script>
//生命周期函数就是vue实例在某一个时间点会自动执行的函数
var app = new Vue({
el:'#app',
data:{
firstName:"Dell",
lastName:"Lee",
fullName:"Dell Lee",
age:28
},
//计算属性
// computed:{//如果值没有发生改变,不会计算,有缓存的概念
// fullName:function () {
// return this.firstName + " " + this.lastName
// }
// }
//方法,没有缓存的概念
// methods:{
// fullName:function () {
// return this.firstName + " " + this.lastName
// }
// },
//侦听器 有缓存概念
watch:{
firstName:function () {
this.fullName = this.firstName + " " + this.lastName
},
lastName:function () {
this.fullName = this.firstName + " " + this.lastName
}
}
})
</script>
</body>
</html>
2.vue计算属性的set和get方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue计算属性的set和get</title>
<!--引入/vue.js-->
<script src="./vue.js"> </script>
</head>
<body>
<div id="app">
{{fullName}}
</div>
<script>
//生命周期函数就是vue实例在某一个时间点会自动执行的函数
var app = new Vue({
el:'#app',
data:{
firstName:"Dell",
lastName:"Lee",
},
//计算属性
computed: {//如果值没有发生改变,不会计算,有缓存的概念
fullName: {
get: function () {
return this.firstName + " " + this.lastName
},
set: function (value) {
var arr = value.split(" ");//字符串以空格分割之后存到数组
this.firstName = arr[0];
this.lastName = arr[1];
console.log(value)
}
}
}
})
</script>
</body>
</html>
网友评论