vue的computed、watch和methods
参考了官方文档,总结如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="example">
<input type="text" v-model="firstname">
<input type="text" v-model="lastname">
<input type="text" v-model="fullname">
<input type="button" @click="getFullname()" value="点我">
</div>
</body>
<script>
var vm = new Vue({
el:'#example',
data:{
firstname:'xiao',
lastname:'ming',
fullname:''
},
computed: {// 直接计算它下面属性,不用管他有没有被动,至于牵涉到的属性都是直接计算得的
fullname: function () {
// `this` 指向 vm 实例
// return this.firstname.split('').reverse().join('')
return this.firstname+this.lastname;
}
},
watch:{// 只有有动watch下面动属性了才会触发他的操作
fullname:function () {
this.fullname = this.firstname+this.lastname;
}
},
methods: {
getFullname:function(){
this.fullname=this.firstname+this.lastname;
}
}
});
</script>
</html>