基础例子：
<div id="example">
<p>A message: "{{message}}"</p>
<p>B reversed message: "{{reversedMessage}}"</p>
</div>
<script>
var vm = new Vue({
el: "#example",
data: {
message: 'hello',
},
computed: {
reversedMessage: function() {
return this.message.split('').reverse().join('')
}
}
})输出结果：
A message hello
B reversed message olleh
例子2：
<div id="example">
{{ fullName }}
</div>
<script>
var vm = new Vue({
el: "#example",
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
}
}
})
</script> <div id="example">
{{ fullName }}
</div>
<script>
var vm = new Vue({
el: "#example",
data: {
firstName: 'Foo',
lastName: 'Bar',
},
computed: {
fullName: function() {
return this.firstName + ' ' + this.lastName;
}
}
})
</script>以上两段代码等同.
二、监听器
<div id="root">
姓：<input type="text" v-model="firstName"> 名:
<input type="text" v-model="lastName">
<br>
<div>{{fullName}}</div>
<div>{{count}}</div>
</div>
<script>
new Vue({
el: "#root",
data: {
firstName: "",
lastName: "",
count: 0,
},
//计算属性
computed: {
fullName: function() {
return this.firstName + " " + this.lastName;
}
},
//监听器
watch: {
// firstName: function() {
// this.count++
// },
// lastName: function() {
// this.count++
// }
fullName: function() {
this.count++
}
}
})
</script>