<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="GB2312">
<title>计算属性，方法，侦听器</title>
<script src="https://cdn.bootcss.com/vue/2.5.21/vue.min.js"></script>
<!--<style>
.active {
background-color: #ccc;
}
</style>-->
</head>
<body>
<!--用插值表达式 可以直接调用方法里面定义的函数-->
<div id="app">
{{fullName}}
{{age}}
<br>
{{message+"jlkjlkj"}}
</div>
<!--demo-->
<!-- ////demo-字符倒序-4-->
<!--<div id="app">
<p>Original message:"{{ message }}"</p>
<p>Computed reversed message:"{{ reversedMessage }}"</p>
</div>-->
<script>
var vm = new Vue({
el: "#app",
data: {
firstName: "Dell",
lastName: "Lee",
fullName: "Dell Lee",
age: 28,
message: 'Hello World!',
},
//这三种方法，computed的效率最高
////侦听器-1
//watch:{
// firstName: function () {
// console.log("计算了一次");
// this.fullName = this.firstName + " " + this.lastName;
// },
// lastName: function () {
// console.log("计算了一次");
// this.fullName = this.firstName + " " + this.lastName;
// }
//}
//方法 计算的效率没有计算属性的效率高-2
//methods:{
// fullName:function () {
// return this.firstName + " " + this.lastName
// }
//}
////计算属性，具有缓存，如果依赖的值没有发生改变则不会再计算-3
//computed: {
// fullName: function () {
// console.log("计算了一次");
// return this.firstName + " " + this.lastName
// }
//}
////demo-字符倒序计算-4
//computed: {
// reversedMessage: function () {
// //this 指向 vm 实例
// //split()方法用于把一个字符串分割成字符串数组
// return this.message.split('').reverse().join('')
// }
//}
//当依赖的值发生变化时，computed会发生改变-5
computed: {
fullName: {
get: function () {
return this.firstName + " " + this.lastName
},
set: function (value) {
var arr = value.split(" ");
this.firstName = arr[0];
this.lastName = arr[1];
}
}
}
})
</script>
</body>
</html>计算属性，方法，侦听器
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 计算属性 计算属性，以及其和方法、侦听器的对比 computed（计算属性）性能相对较高，计算属性的结果会被缓存，...
