版权声明:本文为博主原创文章,转载请标明出处。 https://blog.csdn.net/dulinanaaa/article/details/80611045
<!DOCTYPE html>
<html>
<head>
<title>page2</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<script src="http://bj.xdf.cn/huodong/js/jquery-1.12.3.min.js"></script>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
<p>Reversed message: "{{ reversedMessageMethod() }}"</p>
<p>{{now}}</p>
<p>{{now1()}}</p>
</div>
<div id="demo">{{ fullName }}</div>
<div id="demo1">{{ fullName }}</div>
<script>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例,只要vm.message发生改变,这个vm.reversedMessage属性也会跟着改变
return this.message.split('').reverse().join('')
},
now: function() {//每次调用vm.now的结果,都是最初加载页面时的值
return Date.now()
}
},
// 在组件中
methods: {
reversedMessageMethod: function () {//只要vm.message发生改变,这个vm.reversedMessage属性也会跟着改变
return this.message.split('').reverse().join('')
},
now1: function() {//每次调用vm.now1()的结果,都是最新的值
return Date.now()
}
}
})
//计算属性 vs 侦听属性
//不要用vm1这种,要用vm2
var vm1 = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})
//推荐这种
var vm2 = new Vue({
el: '#demo1',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
</script>
</body>
</html>