版权声明:未经同意,不得随意转载转载 https://blog.csdn.net/lucky541788/article/details/83143482
实现效果:字符串的动态拼接
methods方法
html
<div id="app">
<!-- 监听到文本框数据的改变 -->
<input type="text" v-model="firstname" @keyup="getFullName">+
<input type="text" v-model="lastname" @keyup="getFullName">=
<input type="text" v-model="fullname">
</div>
js
let vm = new Vue({
el: '#app',
data: {
firstname: '',
lastname: '',
fullname: ''
},
methods: {
getFullName() {
this.fullname = this.firstname + '+' + this.lastname;
}
}
});
watch方法
html
<div id="app">
<!-- 监听到文本框数据的改变 -->
<input type="text" v-model="firstname">+
<input type="text" v-model="lastname">=
<input type="text" v-model="fullname">
</div>
js
let vm = new Vue({
el: '#app',
data: {
firstname: '',
lastname: '',
fullname: ''
},
watch: {
// 使用这个属性,可以监听 data 中指定数据的变化,
// 然后触发 watch 中对应的 function 处理函数
// 其中传参:第一个(newVal)是指改变后的值,第二个(oldVal)是原值
firstname: function (newVal, oldVal) {
// this.fullname = this.firstname + this.lastname;
this.fullname = newVal + '+' + this.lastname;
},
lastname: function (newVal, oldVal) {
// this.fullname = this.firstname + this.lastname;
this.fullname = this.firstname + '+' + newVal;
}
}
});
注意:虽然看起来 keyup 在这个例子中显得更简单,但是 watch 在一些无键盘点击操作时要监听改变会显得很有用。例如:监听路由地址改变
computer方法
html
<div id="app">
<!-- 监听到文本框数据的改变 -->
<input type="text" v-model="firstname">+
<input type="text" v-model="lastname">=
<input type="text" v-model="fullname">
</div>
js
let vm = new Vue({
el: '#app',
data: {
firstname: '',
lastname: ''
},
computed:{
// 在 computed 中,可以定义一些属性,这些属性叫做【计算属性】,
// 本质就是一个方法,只是使用这些计算属性的时候,是把他们的名称,
// 之间当做属性来使用,并不会把计算属性当做方法调用;
// 注意 1:计算属性在引用的时候,不要加小括号调用,直接当做普通属性去使用
// 注意 2:只要计算属性,这个 function 中,所用的任何 data 中的数据发生了变化,就会
// 立即重新计算这个计算属性的值,否则不会对计算属性从新求值
// 注意 3:计算属性的求值结构,会被缓存起来,方便下次直接使用
fullname:function () {
return this.firstname+'+'+this.lastname
}
}
});
三者区别
- 计算属性(computed):一定要返回一个值,属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算,主要当做属性来使用,适合简单的计算;
- 方法(methods):表示一个具体的操作,主要书写业务逻辑;
- 监听(watch):一个对象,键是需要观察的表达式,值是对应回调函数。主要用来监听某些特定数据的变化,从而进行某些具体的业务逻辑操作;可以看做 computed 和 methods 的结合体